微客导航 » 文章资讯 » Vue2.0 v-for filter列表过滤功能的实现

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

2023-09-08 08:29:05 272

使用计算属性app.js

varapp5=newVue({
el:'#app5',
data:{
shoppingList:[
"Milk","Donuts","Cookies","Chocolate","PeanutButter","PeptoBismol","PeptoBismol(Chocolateflavor)","PeptoBismol(Cookieflavor)"
],
key:""
},
computed:{
filterShoppingList:function(){
//`this`pointstothevminstance
varkey=this.key;
varshoppingList=this.shoppingList;
returnshoppingList.filter(function(item){
returnitem.toLowerCase().indexOf(key.toLowerCase())!=-1
});;
}
}
})

app.html


Vue-for


{{item}}


Vue-forfilter实现

FilterKey

{{item}}

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

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

返回顶部
3162201930
czq8825@qq.com

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

Vue-for

Vue-forfilter实现

热门推荐

随机推荐