码迷,mamicode.com
首页 > 其他好文 > 详细

VUE-搜索过滤器

时间:2018-01-29 22:39:08      阅读:720      评论:0      收藏:0      [点我收藏+]

标签:length   pre   col   style   无数据   cas   object   com   .so   

首先引入Vue这个就不解释了

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>
JS部分
var vm = new Vue({
  el: ‘#app‘,
  data: {
    search: ‘‘,
    products: [{
      name: ‘苹果‘,
      price: 25,
      category: "水果"
    }, {
      name: ‘香蕉‘,
      price: 15,
      category: "水果"
    }, {
      name: ‘雪梨‘,
      price: 65,
      category: "水果"
    }, {
      name: ‘宝马‘,
      price: 2500,
      category: "汽车"
    }, {
      name: ‘奔驰‘,
      price: 10025,
      category: "汽车"
    }, {
      name: ‘柑橘‘,
      price: 15,
      category: "水果"
    }, {
      name: ‘奥迪‘,
      price: 25,
      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) > -1
          })
        })
      }

      return this.products;
    }
  }
})

非常实用把,试一下哦

VUE-搜索过滤器

标签:length   pre   col   style   无数据   cas   object   com   .so   

原文地址:https://www.cnblogs.com/buildweb/p/8379629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!