vue的filter用法,检索内容
2024-08-29 23:03:22
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; //在使用filter时需要注意的是,前面调用的是需要使用filter的数组,而给filter函数传入的是数组中的每个item,也就是说filter里面的函数,是每个item要去做的,并将每个结果返回。
return shoppingList.filter(function (item) {
return item.toLowerCase().indexOf(key.toLowerCase()) != -1 });;
}
}
})
<ul> Filter Key<input type="text" v-model="key"> <li v-for="item in filterShoppingList"> {{ item }} </li> </ul>
最新文章
- yii框架中验证器声明一组内置验证器可以使用短名称引用
- Yii2中的零碎知识点
- BZOJ 3294: [Cqoi2011]放棋子
- DIV与IDIV的用法
- Linux同步机制(一) - 线程锁
- 【好玩的应用】QQ连连看辅助工具
- Unity 角色复活和重新开始游戏
- 计算机视觉与模式识别代码合集第二版two
- freemarker该阵列
- Angular2.js——数据显示
- 【Luogu3808】多项式乘法FFT(FFT)
- fcode-页面九宫格自动锁屏jquery插件
- js常用的字符串方法分析
- 【博客导航】Nico博客导航汇总
- UOJ 7 NOI2014 购票
- 31 ArcGIS中后缀一览表(持续更新中……)
- Java 验证代理ip
- hibernate映射(学生-科目-成绩)
- Luogu P4462 [CQOI2018]异或序列
- WEB UI 界面打印PDF
热门文章
- collections,random
- 《CSP.OI吟》
- BZOJ2120 数颜色(带修改的莫队算法)
- python中字符串的翻转(方法总结)
- (19)ln命令:在文件之间建立链接(硬链接和软链接)
- C# 使用PictureBox实现图片按钮控件
- hdu4710 Balls Rearrangement(数学公式+取模)
- Codeforces Round #650 (Div. 3) C. Social Distance
- zoj3623 Battle Ships
- bfs输出路径 &;&; 最短路(迪杰斯特拉)输出路径