Vue2.0 v-for filter列表过滤功能的实现

使用计算属性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列表过滤功能的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。