Vue2.0实现1.0的搜索过滤器功能

　　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>

转载于:https://www.cnblogs.com/zhansu/p/6118793.html

Vue2.0实现1.0的搜索过滤器功能相关推荐

javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性回想起来实现此功能很简单,1.前端输入字符串文本改变异步请求服务器将返回的资料显示 ...
[vue] vue2.0不再支持v-html中使用过滤器了怎么办？
[vue] vue2.0不再支持v-html中使用过滤器了怎么办? 在method中定义方法 htmlFilter(htmlString){ return htmlString.replace(/+s ...
同一电脑上安装且使用vue2.0和vue3.0版本
问题: 想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目,如何实现? 方法: 第一步: 卸载全局安装的vue版本.(注:自行百度搜索如何卸载全局vue2vue3脚手架) 第二步: 在自 ...
Solr入门之官方文档6.0阅读笔记系列(八) 相关过滤器
第三部分 : Understanding Analyzers, Tokenizers, and Filters Filter Descriptions You configure each fil ...
【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...
android 百度周边雷达,android 百度地图SDK 3.7.0 周边雷达-Radar 周边搜索-PoiSearch
因为项目需要,最近研究了下百度地图的SDK,简单记录一些点. 准备工作 1.下载SDK及demo 2.申请key key需要用到app的包名和签名证书的SHA1值如果需要使用周边雷达功能,需要再 ...
Elasticsearch：使用最新的 Python client 8.0 来创建索引并搜索
随着 Elastic Stack 8.0 的推出,Elastic 也推出了最新的 python client 8.0 安装包.这是 Elasticsearch 的官方低级 Python 客户端. 它的 ...
【c++算法篇】--30分钟从0到精通讲解算法--搜索
c++搜索算法---详解搜索算法概念具体实现深度优先搜索(dfs) 原理/思路实现过程例题题目1 题目2 题目3 题目4 AC代码+思路详解题目1 题目2 题目3 题目4 广度优先搜索( ...
vue2.0 + router 3. 0 动态添加路由
3月11日周五作日回顾 .动态添加路由实现语句 vue 2.0使用 this.$router.addRoutes(); this.$router.addRoutes(currRoutes);// ...

Vue2.0实现1.0的搜索过滤器功能

Vue2.0实现1.0的搜索过滤器功能相关推荐

最新文章

热门文章