Vue关键字搜索功能（小案例）

这篇具有很好参考价值的文章主要介绍了Vue关键字搜索功能（小案例）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这里介绍两种方法：1、使用watch侦听方法 2、computed计算属性方法
页面结果：
Vue关键字搜索功能（小案例）

第一种

<body>
    <div id="app">
        <!-- 搜索框 -->
        <input type="text" v-model:value="keyword">
        <!-- 数据，遍历filPerson-->
        <ul>
            <li v-for="p in filPerson" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                keyword:'',
                persons:[
                    {id:1,name:'知花实央',age:20},
                    {id:2,name:'虎杖悠仁',age:18},
                    {id:3,name:'切嗣',age:16},
                    {id:4,name:'卫宫切嗣',age:33}
                ],
                filPerson:[]
            },
            //第一种写法
            watch:{
                keyword:{
                     //初始化，在生成vue时，先执行一遍handler
                    immediate:true,//作用：刚开始filPerson为空，所以要先给filPerson赋一次值
                    handler(val){
                        //person中包含val数据，赋值给filPerson
                        this.filPerson=this.persons.filter((p)=>{
                            return p.name.indexOf(val)!=-1
                        })
                    }
                }
            }

            //第二种写法
            // computed:{
            //     filPerson(){
            //         return this.persons.filter((p)=>{
            //             return p.name.indexOf(this.keyword)!=-1
            //         })
            //     }
            // }
        })
    </script>
</body>

第二种
相较于watch写法，computed写法看上去更加简洁，比如：
1、computed自身就是一种计算属性，不必再去data中新建一个属性。
2、计算属性实时更新，不用像watch方法，新建的filPerson初始值为空,还需要手动开启设置immediate=true初始化，令handler在vue实例创建后先运行一次，赋予初始值。

<body>
    <div id="app">
        <!-- 搜索框 -->
        <input type="text" v-model:value="keyword">
        <!-- 数据 -->
        <ul>
            <li v-for="p in filPerson" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                keyword:'',
                persons:[
                    {id:1,name:'知花实央',age:20},
                    {id:2,name:'虎杖悠仁',age:18},
                    {id:3,name:'切嗣',age:16},
                    {id:4,name:'卫宫切嗣',age:33}
                ],
                // filPerson:[]
            },
            //第一种写法
            // watch:{
            //     keyword:{
            //          //初始化，在生成vue时，先执行一遍handler
            //         immediate:true,//作用：刚开始filPerson为空，所以要先给filPerson赋一次值
            //         handler(val){
            //             //过滤掉不包含keyword数据，再赋值给filPerson
            //             this.filPerson=this.persons.filter((p)=>{
            //                 return p.name.indexOf(val)!=-1
            //             })
            //         }
            //     }
            // }

            //第二种写法
            computed:{
                filPerson(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!=-1
                    })
                }
            }
        })
    </script>
</body>

其实watch方法和computed方法各有优劣，computed方法自己就是一种计算属性，很多时候直接给自己赋值，省去很多代码；但是watch方法能够做到跟多的细节操作，甚至computed能实现的，它都能实现，还能实现更多computed实现不了的细节。文章来源地址https://www.toymoban.com/news/detail-463916.html

到了这里，关于Vue关键字搜索功能（小案例）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！