当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue2.0 v-for filter列表过滤功能的实现

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

吕中楼最新消息,兰望美,刘超英政治献金案

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网