【学習メモ】動かして学ぶ！Vue.js 開発入門 その4

Chapter6 条件とくり返しを使うとき

01 条件によって表示する：v-if

条件で表示するときは、v-if

<div id="app">
  <!-- true のときだけ表示する -->
  <label><input type="checkbox" v-model="myVisible">表示する</label>
  <p v-if="myVisible">チェックボックスはON</p>
  <hr>
  <!-- true と false で表示を切り替える -->
  <label><input type="checkbox" v-model="myVisible">表示する</label>
  <p v-if="myVisible">チェックボックスはON</p>
  <p v-else="myVisible">チェックボックスはOFF</p>
  <!-- クリックしたら「いいね！」ボタンが消える -->
  <button v-if="isShow" v-on:click="like">Like</button>
</div>

new Vue({
  el: "#app",
  data: {
    myVisible: false,
    isShow: true,
  },
  methods: {
    like: function () {
      this.isShow = false
    }
  }
});

結果

02 くり返し表示する：v-for

くり返し表示するときは、v-if

<div id="app">
  <!-- 配列データをリストで表示する -->
  <ul>
    <li v-for="item in myArray">{{ item }}</li>
  </ul>
  <!-- 配列データを番号付きリストで表示する -->
  <ul>
    <li v-for="(item, index) in myArray">{{ index }}:{{ item }}</li>
  </ul>
  <!-- オブジェクトの配列データをリストで表示する -->
  <ul>
    <li v-for="item in objArray">名前：{{ item.name }} / 年齢：{{ item.age }}</li>
  </ul>
  <!-- 1x2〜10x2をくり返し表示する -->
  <ul>
    <li v-for="n in 10">{{ n }}x2={{ n * 2 }}</li>
  </ul>
  <!-- 配列データをテーブルで表示する -->
  <h3>出席ランキング</h3>
  <table>
    <thead>
      <th v-for="item in header">{{ item }}</th>
    </thead>
    <tbody>
      <!-- 1行のくり返し -->
      <tr v-for="line in attendance">
        <!-- 1データのくり返し -->
        <td v-for="item in line">{{ item }}</td>
      </tr>
    </tbody>
  </table>
</div>

new Vue({
  el: "#app",
  data: {
    myArray: ['Taro', 'Hanako', 'Ichiro'],
    objArray: [
      { name: "Taro", age: 20 },
      { name: "Hanako", age: 30 },
      { name: "Ichiro", age: 40 }
    ],
    header: ['名前/年', '2016', '2017', '2018', '2019'],
    attendance: [
      ['Taro', 1, 2, 3, 4],
      ['Hanako', 2, 3, 4, 1],
      ['Ichiro', 1, 4, 3, 2]
    ]
  }
});

結果

配列データの追加と削除

Vue.js で配列を使うとき、注意するのは、値を変更するときも splice メソッドを使うということです。

<div id="app">
  <!-- ボタンでリストの追加・削除を行う -->
  <ul>
    <li v-for="item in myArray">{{ item }}</li>
  </ul>
  <button v-on:click="addLast">末尾に追加</button>
  <button v-on:click="addObj(3)">4つ目に追加</button>
  <button v-on:click="changeObj(0)">1つ目を変更</button>
  <button v-on:click="deleteObj(1)">2つ目を削除</button>
  <hr>
  <!-- ボタンをクリックしたらソートする -->
  <ul>
    <li v-for="item in myNumber">{{ item }}</li>
  </ul>
  <button v-on:click="sortDataAsc(myNumber)">ソートする（昇順）</button>
  <button v-on:click="sortDataDesc(myNumber)">ソートする（降順）</button>
</div>

new Vue({
  el: "#app",
  data: {
    myArray: ['1つ目', '2つ目', '3つ目', '4つ目', '5つ目'],
    myNumber: [3, 4, 1, 5, 2]
  },
  methods: {
    addLast: function () {
      this.myArray.push('[末尾に追加]');
    },
    addObj: function (index) {
      this.myArray.splice(index, 0, '[追加]');
    },
    changeObj: function (index) {
      this.myArray.splice(index, 1, '[変更]');
    },
    deleteObj: function (index) {
      this.myArray.splice(index, 1);
    },
    sortDataAsc: function (listData) {
      listData.sort(function (a, b) {
        return (a < b ? -1 : 1);
      });
    },
    sortDataDesc: function (listData) {
      listData.sort(function (a, b) {
        return (a > b ? -1 : 1);
      });
    },
  }
});

結果

v-for と v-if の組み合わせ

v-for は v-if と組み合わせて使うこともできます。「くり返しを行いながら、条件を満たすときだけ表示させる」ということができます。

<div id="app">
  <!-- 偶数だけ表示する -->
  <ul>
    <li v-for="item in myArray" v-if="item % 2 == 0">{{ item }}</li>
  </ul>
  <!-- ボタンをクリックしたら偶数だけ表示する -->
  <ul>
    <li v-for="item in myArray">{{ item }}</li>
    <button v-on:click="eventDataEven()">偶数だけ表示する</button>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    myArray: [1, 2, 3, 4, 5, 6]
  },
  methods: {
    eventDataEven: function () {
      this.myArray = this.myArray.filter(
        function (value) {
          return value % 2 == 0;
        }
      );
    }
  }
});

結果