列表过滤应用
需求:根据input输入框判断输入的值显示数组一样的值
利用fiter
练习案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" @input="handleInput()" v-model="mytext">
<ul>
<li v-for="data in datalist">
{{data}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#box',
data: {
mytext: '',
datalist: ["aaa","bbb","ccc","ddd","eee","rrr"],
list: ["aaa","bbb","ccc","ddd","eee","rrr"]
},
methods: {
handleInput(){
console.log("只需要value改变,就会触发");
//利用输入框的字符,过滤出包含字段的元素
var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1);//对list数组进行过滤,输出输入的值对应的项
this.datalist = newlist;//把过滤好的数组赋值给datalist
}
}
})
</script>
</body>
</html>
不影响原来数据,每一次都基于原始数据
笨办法
复制一份元数据,在复制的这份上面过滤
list: [“aaa”,“bbb”,“ccc”,“ddd”,“eee”,“rrr”]
var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1);