Use Computing Properties
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 = ; var shoppingList = ; return (function (item) { return ().indexOf(()) != -1 });; } } })
<div > <h2>Vue-for</h2> <ul> <li v-for="item in shoppingList"> {{ item }} </li> </ul> <h2>Vue-for filteraccomplish</h2> <ul> Filter Key<input type="text" v-model="key"> <li v-for="item in filterShoppingList"> {{ item }} </li> </ul> </div>
The final effect realizes the function of filtering lists based on keywords.
The implementation of the above Vue2.0 v-for filter list filtering function is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.