<!DOCTYPE HTML>
<html lang= 'en'>
<head>
<meta charset = 'UTF-8'/>
</head>
<body>
<div id = 'box'>
<!--@input 当输入框中value的值改变的时候执行函数-->
<!--v-model 实时获取输入框中的value值-->
<input type = 'text' @input = 'handleInput()' v-model = 'mytext'/>
<ul>
<!--v-for 遍历的作用-->
<li v-for = 'data in datalist'>
{
{
data}}
</li>
</ul>
</div>
<script src = 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
var vm = new Vue({
el:'#box',
data:{
mytext:'',
datalist:['aaa', 'bbb', 'ccc', 'ddd', 'add', 'cee', 'eee'],
list:['aaa', 'bbb', 'ccc', 'ddd', 'add', 'cee', 'eee'],
},
methods:{
handleInput(){
//console.log(this.mytext);
//filter()过滤函数 遍历效果将满足条件放到数组中
//item相当于数组的每一项
//indexOf(n)函数的作用就是n如果在对象中出现过返回
//大于-1的数字，没有则返回小于等于-1的数字
var newlist = this.list.filter(item=>{
return item.indexOf(this.mytext) > -1;
});
//console.log(newlist);
this.datalist = newlist;
}
},
});
</script>
</body>
</html>
列表过滤应用搜索框中搜索效果
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/108544862
今日推荐
周排行