VUE——案例同上。根据关键字实现数组过滤_根据关键字过滤对象数组-优快云博客

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/103114493

本文详细介绍了在Vue.js项目中如何利用关键词来动态过滤数组数据，通过实例展示了具体的实现步骤和代码，帮助开发者理解Vue的响应式原理和数组操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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