其实模糊查找在我心里,一直都是很高大上的存在。我觉得它很神奇。
我刚学了点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>
要天天开心哟 :)