vue案例之模糊查找

本文通过一个简单的Vue.js案例,展示了如何利用filter方法和indexOf()实现模糊查找功能。当输入框内容变化时,@input事件触发handleInput()方法,过滤数据列表并显示匹配项。此教程适合初学者理解前端数据绑定和动态过滤数据。
摘要由CSDN通过智能技术生成

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

我刚学了点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>

要天天开心哟 :)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值