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过滤器实现模糊搜索
基础教程推荐
猜你喜欢
- 表单上传功能实现 ajax文件异步上传 2023-02-14
- Vue 框架之动态绑定 css 样式实例分析 2024-01-18
- JS实现小球的弹性碰撞效果 2024-04-03
- Ajax实现无闪烁定时刷新页面实例代码 2022-12-28
- vue3相对于vue2有哪些新特性? 2025-01-15
- springboot+vue3搭建项目 2023-10-08
- Fly拦截全局Ajax请求的方法 2023-02-23
- css之Display、Visibility、Opacity、rgba和z-index: -1的区别 2024-04-07
- 关于javascript:在Sencha Touch 2.4.0 中实现路由 2022-09-15
- css实现一个元素高度固定宽度按比例显示效果 2024-04-07