基礎からメモ： Vue.js CH2-p74 条件分岐を使ったリストの描画、フォームからリストへの要素の追加

条件を使ったクラスの操作

リストの各要素に条件を適用する方法。

リストデータのうち特定のプロパティが条件に合うものだけを操作する。 hpプロパティが300より大きい場合.tuyoiクラスを付与して「強い！」の文字を表示する。

[index11.html]

<div id="app">
   <ul>
     <li v-for="item in list" v-bind:key="item.id" v-bind:class="{ tuyoi: item.hp > 300 }">
       ID: {{ item.id }} {{ item.name }} HP: {{ item.hp }}
       <span v-if="item.hp > 300"> 強い！</span>
     </li>
   </ul>
</div>

[main11.js]

var app = new Vue({
  el: '#app',
  data: {
      list: [
        { id: 1, name: 'スライム', hp: 100 },
        { id: 2, name: 'ゴブリン', hp: 200 },
        { id: 3, name: 'ドラゴン', hp: 500 },
      ],
  },
})

Vueインスタンスのクラスは前のとほとんど同じ。表示結果はこうなる。

ID: 1 スライム HP: 100
ID: 2 ゴブリン HP: 200
ID: 3 ドラゴン HP: 500 強い！

条件に合う要素のみ表示する

v-forを使っているタグに直接v-ifで条件を付ける。hpが300以上だと表示されない。

<div id="app">
    <ul>
      <li v-for="item in list" v-bind:key="item.id" v-if="item.hp < 300">
        ID: {{ item.id }} {{ item.name }} HP: {{ item.hp }}
      </li>
    </ul>
</div>

表示結果：

ID: 1 スライム HP: 100
ID: 2 ゴブリン HP: 200

リストの更新

注意：次の方法では更新を検知できない。

インデックスを使った配列要素の更新
後から追加されたプロパティの更新

this.list = []    // OK
this.list[0].name = 'New'    // OK
this.list[0] = 'New'    // NG

要素の追加

新しい要素の追加はpushやunshiftを使う

this.list.push(新しい要素)

v-modelディレクティブでフォームから新しい名前を取得し、ボタンクリックで追加

<!-- フォームからモンスターを追加  -->
<p>追加する名前： 
    <input v-model="name">
    <button v-on:click="doAdd">モンスターを追加</button>
</p>
<ul>
    <li v-for="item in list" v-bind:key="item.id" >
    ID: {{ item.id }} {{ item.name }} HP: {{ item.hp }}
    </li>
</ul>

ボタンクリックでmethodsオプションに定義されたdoAddメソッドが起動し、フォーム入力された新しい名前の要素がリストに追加される。

新しい名前はapp.nameに代入される。
新しい要素のIDは、その時点でのリストの一番大きな要素のIDに＋１したもの。
hpプロパティは500で固定。

var app = new Vue({
  el: '#app',
  data: {
      name: 'キマイラ',
      list: [
        { id: 1, name: 'スライム', hp: 100 },
        { id: 2, name: 'ゴブリン', hp: 200 },
        { id: 3, name: 'ドラゴン', hp: 500 }
      ]
  },
  methods: {
    doAdd: function() {
      // リスト内で一番大きいIDを取得
      var max = this.list.reduce(function(a, b) {
        return a.id > b.id ? a.id : b.id
      }, 0);
      this.list.push({
        id: max + 1,
        name: this.name,
        hp: 500
      });
    },
 }
})

ボタンクリックでinputフォームの新しい名前（初期値”キマイラ”）を追加した。

追加する名前：

ID: 1 スライム HP: 100
ID: 2 ゴブリン HP: 200
ID: 3 ドラゴン HP: 500
ID: 4 キマイラ HP: 500

v-bindやv-ifを使って、リスト表示の際に特定の要素を条件操作できる。

新しい要素の追加はpushやunshiftを使う。

v-modelディレクティブでフォームから新しい名前を取得できる。

ボタンクリックでmethodsオプションに定義されたメソッドを起動し、リストに要素を追加できる。