条件分岐_2

v-show

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-show="!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
    }]
  },
  computed: {
    matchList: function() {
    // フィルターを使って price より小さいものだけの配列を作って返す
      return this.list.filter(function(val) {
        return val.price <= this.price
      }, this)
    }
  }
})