vue案例之模糊查找

其实模糊查找在我心里，一直都是很高大上的存在。我觉得它很神奇。

我刚学了点c语言的时候就在想，那模糊查找不得查死啊？！那么多遍历。（并没有，我天真了）

首先，我们先建立基本的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊查找案例</title>
    <script src="../vue.js"></script>  
    //这里的vue.js路径要根据自己下载的vue.js文件的位置来写
    //vue.js去官网下载，也可以不下载，直接贴官网给的路径如下
    //<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    //更多官网内容请访问：https://cn.vuejs.org/v2/guide/
    
</head>
<body>
    <div id="box">
        <input type="text">
        <ul>
            <li v-for="data in dataList">{
   
   {data}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data:{
                dataList:["小珍同学","天天开心","健健康康","快乐成长","快乐小狗","天天汪汪汪"]
            }
        })
    </script>
</body>
</html>

接下来，我们要为搜索框加入触发事件 @input = handleInput()

@input的属性是：只要文本框的内容（value）发生改变，就会触发

这里再提一下@change，它的属性是：失去焦点，就会触发

数组里有个方法叫过滤 filter() ，可以用它来过滤出和我们输入的字符相同的元素。

字符串里有个方法叫 indexOf()，可以用它来找出这个元素中有没有子字符串

其他要注意的点，都写在下面完整的代码里了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊查找案例</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" @input="handleInput()" v-model="mytext">
        <ul>
            <li v-for="data in resultList">{
   
   {data}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',  //表示vue在哪里开始使用
            data:{  //放数据的地方
                mytext:'',  //和input的数据绑起来，可以实时接收到输入框值的变化
                dataList:["小珍同学","天天开心","健健康康","快乐成长","快乐小狗","天天汪汪汪"],
                resultList:["小珍同学","天天开心","健健康康","快乐成长","快乐小狗","天天汪汪汪"] //初始化
            },
            methods:{
                //放方法的地方
                handleInput(){
                    //注意：filter的使用不会修改原数组，而是返回一个新数组
                    var newList = this.dataList.filter(item => item.indexOf(this.mytext) > -1)
                    this.resultList = newList
                }
            }
        })
    </script>
</body>
</html>

要天天开心哟 :)

vue案例之模糊查找

猜你喜欢