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>