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>

 

posted @ 2016-11-30 17:37  姜瑞涛  阅读(6300)  评论(0)  编辑  收藏  举报