zoukankan      html  css  js  c++  java
  • 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;
        }
      }
    })
  • 相关阅读:
    112. Path Sum
    66. Plus One
    258. Add Digits
    268. Missing Number
    275. H-Index II
    274. H-Index
    264. Ugly Number II
    263. Ugly Number
    199. Binary Tree Right Side View
    222. Count Complete Tree Nodes
  • 原文地址:https://www.cnblogs.com/xueweijie/p/6840727.html
Copyright © 2011-2022 走看看