Vue2.0实现1.0的搜索过滤器功能实例代码
作者：姜瑞涛 时间：2024-05-09 10:40:30
Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。
<body>
<div class="app">
<input type="text" v-model="name">
<ul>
<li v-for="user in newUsers" >
{{ user.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: '.app',
data: {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' },
{ name: '赵' }
]
},
computed: {
newUsers: function () {
var that = this;
return that.users.filter(function (user) {
return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
})
}
}
})
</script>
</body>
来源：http://www.cnblogs.com/zhansu/p/6118793.html
标签：vue,搜索
0
投稿猜你喜欢
Python多线程原理与用法实例剖析
2023-07-22 13:40:37
解决echarts数据二次渲染不成功的问题
2024-04-27 15:56:44
python学习之可迭代对象、迭代器、生成器
2023-08-22 03:21:46
vue3 watch和watchEffect的使用以及有哪些区别
2024-05-05 09:11:09
pytorch+sklearn实现数据加载的流程
2022-05-15 14:44:27
Python 炫技操作之合并字典的七种方法
2022-07-16 05:56:12
Golang 按行读取文件的三种方法小结
2024-02-20 18:45:29
解决方案,而不是功能
2011-01-30 18:11:00
Python高级特性——详解多维数组切片(Slice)
2023-01-20 17:04:13
SQL Server数据库触发器安全隐患解析
2009-03-25 12:56:00
Python解决走迷宫问题算法示例
2023-04-18 02:14:45
怎样在SQL Server 2005中用证书加密数据
2009-01-04 14:11:00
MySQL SELECT数据查看WHERE(AND OR IN NOT)语句
2024-01-25 16:05:22
如何应对SQL Server数据库崩溃
2008-11-24 17:25:00
SQL Server中的执行引擎入门 图解
2012-06-06 20:08:26
对pycharm 修改程序运行所需内存详解
2022-10-23 09:14:58
巧制可全屏拖动的图片
2008-05-09 19:34:00
使用JavaScript和CSS实现文本隔行换色的方法
2024-04-19 09:46:52
使用tensorflow实现矩阵分解方式
2022-04-17 17:01:17
PHP中Too few arguments to function的问题及解决
2023-06-04 21:15:55
