vue过滤数据

 1. v-for

• {{item.name}}

// js
new Vue({
   el: '#app',
   data: {
       items: [
           {name: '张三', age: 18},
           {name: '李四', age: 20},
           {name: '王五', age: 22}
       ]
   }
})

2. computed

• {{item.name}} {{item.age}}

// js
new Vue({
   el: '#app',
   data: {
       items: [
           {name: '张三', age: 18},
           {name: '李四', age: 20},
           {name: '王五', age: 22}
       ]
   },
   computed: {
       filteredItems() {
           return this.items.filter(item => {
             return item.age > 20;
           })
       }
   }
})

3. filter

• {{item.name}} {{item.age}}

// js
Vue.filter('filterBy', function (items) {
   return items.filter(item => item.age > 20)
})

new Vue({
   el: '#app',
   data: {
       items: [
           {name: '张三', age: 18},
           {name: '李四', age: 20},
           {name: '王五', age: 22}
       ]
   }
})