Vue通过input筛选数据


<div id="app">
  <input v-model='search' />
  <ul>
    <li v-for="item in items">
        <label>价格</label><span v-html="item.name"></span>
        <label></label><span v-html="item.price"></span>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
    search: '',
    products: [{
      name: '苹果',
      price: 25
    }, {
      name: '香蕉',
      price: 15
    }, {
      name: '雪梨',
      price: 65
    }, {
      name: '宝马',
      price: 2500
    }, {
      name: '奔驰',
      price: 10025
    }, {
      name: '柑橘',
      price: 15
    }, {
      name: '奥迪',
      price: 25
    }]
  },
  computed: {
    items: 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;
    }
  }
})

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM