Vue2.0实现1.0的搜索过滤器功能实例代码
内容摘要
这篇文章主要为大家详细介绍了Vue2.0实现1.0的搜索过滤器功能实例代码，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
Vue2.0删除了很多1
对此感兴趣的朋友，看看idc笔记做的技术笔记！
Vue2.0删除了很多1
文章正文
这篇文章主要为大家详细介绍了Vue2.0实现1.0的搜索过滤器功能实例代码，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。
注：关于Vue2.0实现1.0的搜索过滤器功能实例代码的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
