使用計算屬性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列表過濾功能的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。