微信小程序7新趋势_Vue2.0完成1.0的查找过滤器功用

2021-01-12 12:48

Vue2.0实现1.0的搜索过滤器功能实例代码       本篇文章主要介绍了Vue2.0实现1.0的搜索过滤器功能实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下。

 body 
 div 
 input type="text" v-model="name" 
 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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888