vue实现模糊搜索功能

IT---小李子

已于 2023-10-23 23:14:46 修改

阅读量408

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-10-23 23:03:18 首次发布

本文链接：https://blog.csdn.net/weixin_63275266/article/details/133999214

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

#vue实现模糊搜索功能

##第一步：准备初始数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>汽车信息</h2>
        <input type="text" placeholder="请输入..." v-model:value="keyword">
        <ul>
            <li v-for="(item, index) in querycars"> {{item.name}} -- {{item.price}}</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示

        new Vue({
            el:'#root',
            data:{
                keyword:'',
                cars:[
                    {id:'001', name:'红旗', price:'30w'},
                    {id:'002', name:'雪佛兰', price:'40w'},
                    {id:'003', name:'大奔', price:'50w'},
                    {id:'004', name:'凯迪拉克', price:'60w'},
                    {id:'005', name:'野马', price:'70w'}
                ],
            },
        })
    </script>
</body>
</html>

##第二步：别急，我们先回顾一下监视属性

 /*
                //监视属性的完整写法（函数式）：
                // keyword: function(){}, 最完整的格式
                // keyword(){}, es6简写，省略冒号和function
                // keyword(newvalue, oldvalue){  console.log(newvalue,oldvalue); }, 需要传入两个形参，第一个参数接收监视改变前的值，第二个参数监视改变后的值
                
                // 监视属性的完整写法（对象式）：
                 keyword:{
                    immediate:true, //立即执行，默认值false
                    deep:true, //开启深度监视，默认值false
                    handler(newvalue, oldvalue){ console.log(newvalue,oldvalue); }
                }
                
                //此时你或许会有一个疑问，我们什么时候使用函数式写法？什么时候使用对象式写法呢？
                //最简单的办法就是，写使用函数式写法，当发现函数式写法行不通的时候就换用对象式写法即可，写得多了就清楚了！
                */

##第三步：千万别急，此时我们在回顾一下数组的过滤方法filter和字符串的indexOf方法

 /*
                数组的filter方法：
                    首先不会改变原数组，但是它会返回一个过滤之后的全新的数组，需要写一个 return 书写相应处理逻辑。
                    so，你知道的，那当然是要定义一个空数组去接收这个返回值！
                字符串的indexOf方法：
                    该方法是判断字符串中是否包含传入的形参，如果包含就返回它在字符串中的下标位置，如果不存在就返回 -1 
                分析本次案列中的代码片段：
                    this.querycars = this.cars.filter(item => {
                            // 此处的 item 形参是数组对象中的每一个对象
                            return item.name.indexOf(newvalue) !== -1
                    })
                */

##第四步：相关细节解释
（1）首先我们为什么要定义 querycars:[] ？
定义这个空数组是用来接收数组中的filter方法过滤之后返回的新数组，
用于在小 li 进行 v-for指令进行遍历
如果直接使用原数组的话，那么进行过滤之后，就无法在页面展示出原始数据了
每进行一个过滤之后，数据就会越来越少
解决：
定义一个空数组 querycars:[]，用于接收过滤之后返回的新数组，任何进行遍历即可
（2）其次为什么要使用监视属性的完整写法,并且使用 immediate:true？
如果不开启立即执行，那么页面一开始就是空白的，没有任何数据，不相信的小伙伴可以注释掉，观察页面展示效果哦！
解决：
此处有一个细节：因为字符串的indexOf方法当传入一个空字符串的时候，它会返回一个下标 0 ，而不是返回 -1
所以，利用这一个小细节，我们使用计算属性开启立即执行，那么此时我们的输入框是没有传入任何数据的，那么就是一个空字符串
此时indexOf方法接收到的参数就是一个空字符串，就相当于原始数组里面的内容什么也没有被过滤掉，那么就会把数据原封不动的进行返回
这个时候打开页面就会有数据展示出来啦！
##监听属性实现完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>汽车信息</h2>
        <input type="text" placeholder="请输入..." v-model:value="keyword">
        <ul>
            <li v-for="(item, index) in querycars"> {{item.name}} -- {{item.price}}</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                keyword:'',
                cars:[
                    {id:'001', name:'红旗', price:'30w'},
                    {id:'002', name:'雪佛兰', price:'40w'},
                    {id:'003', name:'大奔', price:'50w'},
                    {id:'004', name:'凯迪拉克', price:'60w'},
                    {id:'005', name:'野马', price:'70w'}
                ],
                querycars:[],
            },
            watch:{
                /*
                //监视属性的完整写法（函数式）：
                // keyword: function(){}, 最完整的格式
                // keyword(){}, es6简写，省略冒号和function
                // keyword(newvalue, oldvalue){  console.log(newvalue,oldvalue); }, 需要传入两个形参，第一个参数接收监视改变前的值，第二个参数监视改变后的值
                
                // 监视属性的完整写法（对象式）：
                 keyword:{
                    immediate:true, //立即执行，默认值false
                    deep:true, //开启深度监视，默认值false
                    handler(newvalue, oldvalue){ console.log(newvalue,oldvalue); }
                }
                */
           
                /*
                数组的filter方法：
                首先不会改变原数组，但是它会返回一个过滤之后的全新的数组，需要写一个 return 书写相应处理逻辑。
                so，你知道的，那当然是要定义一个空数组去接收这个返回值！
                字符串的indexOf方法：
                该方法是判断字符串中是否包含传入的形参，如果包含就返回它在字符串中的下标位置，如果不存在就返回 -1 
                分析本次案列中的代码片段：
                this.querycars = this.cars.filter(item => {
                    // 此处的 item 形参是数组对象中的每一个对象
                    return item.name.indexOf(newvalue) !== -1
                })
                */
               
                keyword:{
                   immediate:true,
                    handler(newvalue){
                        this.querycars = this.cars.filter(item => {
                            return item.name.indexOf(newvalue) !== -1
                        })
                   }
                }
            }
        })
    </script>
</body>
</html>

##计算属性实现完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>汽车信息</h2>
        <input type="text" placeholder="请输入..." v-model:value="keyword">
        <ul>
            <li v-for="(item, index) in querycars"> {{item.name}} -- {{item.price}}</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                keyword:'',
                cars:[
                    {id:'001', name:'红旗', price:'30w'},
                    {id:'002', name:'雪佛兰', price:'40w'},
                    {id:'003', name:'大奔', price:'50w'},
                    {id:'004', name:'凯迪拉克', price:'60w'},
                    {id:'005', name:'野马', price:'70w'}
                ],
            },
            // watch:{
            //     keyword:{
            //        immediate:true,
            //         handler(newvalue){
            //             this.querycars = this.cars.filter(item => {
            //                 return item.name.indexOf(newvalue) !== -1
            //             })
            //        }
            //     }
            // },
            computed:{
                querycars(){
                    // 计算属性主要靠的就是返回值哦！
                    // 所以就不需要定义一个空数组接收过滤之后的返回值了！
                    // 直接在v-for 遍历的地方 书写计算属性定义的变量名字即可
                    return this.cars.filter(item => {
                        return item.name.indexOf(this.keyword) !== -1
                    })
                }
            }
        })
    </script>
</body>
</html>