VUE——案例同上。根据关键字实现数组过滤

            <tbody>
                <!--之前，v-for中的数据，都是直接从data上的list中直接渲染过来的-->
                <!--现在，我们自定义一个search方法，同时把所有关键字通过传参的形式，传递给了search方法-->
                <!--在search方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中，返回-->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name"></td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
<!--省略之前相同的代码-->
    <script>
            methods: {
                search(keywords){//根据关键字进行数据的搜索
                    /*第一种
                    var newList = []
                    this.list.forEach(item =>{
                        if(item.name.indexOf(keywords) !=-1){
                            newList.push(item)
                        }
                    })
                    return newList 
                    */
                    //注意：forEach/some/filter/findIndex都属于数组新方法
                    //都会对数组中的每一项进行遍历，执行相关操作；以下是第二种。
                    return this.list.filter(item =>{
                        //ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
                        //如果包含，则返回true，否则返回false。
                        if (item.name.includes(keywords)){
                            return item
                        }
                    })
                } 
    </script>