使用计算属性app.js

var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" ], key: "" }, computed: { filterShoppingList: function () { // `this` points to the vm instance var key = this.key; var shoppingList = this.shoppingList; return shoppingList.filter(function (item) { return item.toLowerCase().indexOf(key.toLowerCase()) != -1 });; } }})

app.html

<div id="app5"> <h2>Vue-for</h2> <ul> <li v-for="item in shoppingList"> {{ item }} </li> </ul> <h2>Vue-for filter实现</h2> <ul> Filter Key<input type="text" v-model="key"> <li v-for="item in filterShoppingList"> {{ item }} </li> </ul> </div>

最终效果实现了根据关键字来过滤列表的功能。

以上这篇Vue2.0 v-for filter列表过滤功能的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。