条件分岐_3

computedとmethodsの違い

by sarunokoshikake

HTML

<div id="app">
  <ul>
    <li v-for="val in matchList()">
      {{ val.name }} <span v-bind:style="{color: val.price <= 200 ? 'red' : 'blue'}">{{ val.price }}</span> 円
    </li>
    <li v-if="!matchList().length">
      該当する商品はありません
    </li>
  </ul>
  <input v-model.number="inputprice" size="5"> 円以下の商品を表示
  <button @click="price = inputprice">click!</button>
  <p>{{ matchList().length }} 個見つかりました</p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    price: 300,
    inputprice: 200,
    list: [
      {
        name: 'とまと',
        price: 100
      },
      {
        name: 'れたす',
        price: 200
      },
      {
        name: 'きゅうり',
        price: 300
      }
    ]
  },
  methods: {
    matchList: function() {
      // フィルターを使って price より小さいものだけの配列を作って返す
      return this.list.filter(function(val) {
        return val.price <= this.price
      }, this)
    }
  }
})