vuejs 2.0 fliter 搜尋過濾

這是官方的例子

https://cn.vuejs.org/v2/examp...

這是根據你的資料在官方基礎上修改的

https://jsfiddle.net/ycloud/b...點選預覽

script

var vm = new Vue({
  el: '#app',
  data: {
    search: '',
    products: [{
      name: '蘋果',
      price: ,
      category: "水果"
    }, {
      name: '香蕉',
      price: ,
      category: "水果"
    }, {
      name: '雪梨',
      price: ,
      category: "水果"
    }, {
      name: '寶馬',
      price: ,
      category: "汽車"
    }, {
      name: '奔馳',
      price: ,
      category: "汽車"
    }, {
      name: '柑橘',
      price: ,
      category: "水果"
    }, {
      name: '奧迪',
      price: ,
      category: "汽車"
    }]
  },
  computed: {
    searchData: function() {
      var search = this.search;

      if (search) {
        return this.products.filter(function(product) {
          return Object.keys(product).some(function(key) {
            return String(product[key]).toLowerCase().indexOf(search) > 
          })
        })
      }

      return this.products;                  }              }              })                    

html

<div id="app">
  <input v-model='search' />
  <ul v-if="searchData.length > 0">
    <li v-for="item in searchData">{{item.name}},價格:￥{{item.price}}</li>
  </ul>
  <div v-else>暫無資料</div>
</div>