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过滤器实现模糊搜索


基础教程推荐
猜你喜欢
- 举例详解CSS3中的Transition 2024-01-25
- ajax数据返回进行遍历的实例讲解 2023-02-22
- Vue.js从入门到精通第一天 2023-10-08
- 如何用VUE和Canvas实现雷霆战机打字类小游戏 2024-01-23
- jQuery滚动条美化插件nicescroll简单用法示例 2024-02-06
- JS一维数组转化为三维数组的实现示例 2023-08-08
- VSCode带你了解11个很好玩的插件 2024-12-13
- JavaScript实现按键精灵的原理分析 2023-12-20
- JavaScript 模块化详解 2023-08-11
- 浅谈layui框架自带分页和表格重载的接口解析问题 2024-01-06