vue2实现搜索功能计算属性

来源：互联网发布：linux进程组编辑：程序博客网时间：2024/06/06 15:51

Vue2删除了Vue1里很实用的过滤器，我非常心痛啊，现在来学习一下用官方推荐的用计算属性实现的搜索过滤功能吧！

<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>

阅读全文

0 0