vue项目开发中如何利用filter过滤器实现模糊搜索,下面编程教程网小编给大家简单介绍一下具体实现方法!
1、过滤器方法
Vue.filter('search', function (value, searchString) {
if (!searchString) return value;
searchString = searchString.trim().toLowerCase();
return value.filter(function(item) {
if (item.name.toLowerCase().indexOf(searchString) !== -1) {
return true;
}
})
});
2、html代码
<input type="text" v-model="searchString">
<ul>
<li v-for="item in items | search(searchString)">
{{ item.name }}
</li>
</ul>
以上是编程学习网小编为您介绍的“vue如何利用filter过滤器实现模糊搜索”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vue如何利用filter过滤器实现模糊搜索
基础教程推荐
猜你喜欢
- 像table一样布局div 2022-10-16
- js实现消灭星星(web简易版) 2024-02-08
- js字符串中空格和换行符(\r,\s,\n,\r\n)浅析 2022-08-30
- react vue 等等这种mvvm思维的开发方式怎么编写通用组件,或者什么样的组件应该编写为通用组件 2023-10-08
- JavaScript解构赋值详解 2023-08-12
- js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动 2024-01-16
- 关于 json:渲染中的错误:”TypeError:无法读 2022-09-16
- 使用ajax接收后台发送过来的json数据方法 2023-02-14
- 关于document.cookie的使用javascript 2023-12-26
- vue 快速入门 系列 —— 虚拟 DOM 2023-10-08
