JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-01 00:42 作者:startmvc
Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy。官方文档给了通过计算属性实现

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>

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