Vue.js でリストにフィルターをかける

初めに

公式ドキュメントにフィルターされた結果の表示の方法があった。ドキュメントでは算出プロパティを用いていたので、最近勉強したメソッドと v-if ディレクティブを使って同じ結果になることを確認してみた。
https://jp.vuejs.org/v2/guide/list.html

  <div id="app">
    <li v-for="n in numbers">{{ n }}</li>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
})

• 動作結果

算出プロパティでの結果

  <div id="app">
    <li v-for="n in evenNumbers">{{ n }}</li>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
})

• 動作結果

メソッドを用いる方法

こちらは算出プロパティとほとんど変わらない。ただ v-for の中に()を書くことをよく忘れてしまう。

  <div id="app">
    <li v-for="n in evenNumbers()">{{ n }}</li>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  methods: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
})

• 動作結果

v-if を用いる方法

v-if の中に条件式を書くだけで動いた。

  <div id="app">
    <li v-for="n in numbers" v-if="n % 2 == 0">{{ n }}</li>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
})

• 動作結果

参考記事

• 公式ドキュメント
  https://jp.vuejs.org/v2/guide/list.html