<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue框架学习_输入框过滤后台数据</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
<div id="div1">
<input type="text" v-model="inputText" /><!--双向数据绑定-->
<hr />
vue_watch监听输入框值实现输入框过滤
<ul>
<li v-for="data in newDatalist">
{{data}}
</li>
</ul>
vue双向数据绑定实现输入框过滤
<ul>
<li v-for="data in computedDatalist">
{{data}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#div1",//绑定id对象
data:{//定义属性对象
inputText:"",//初始化为空
datalist:["aaa","bbb","ccc","ddd","abcd"], //原始数据
newDatalist:["aaa","bbb","ccc","ddd","abcd"]
},
watch:{//监听输入框的变化
inputText:function(newText){
if(newText.length>0){
this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
for(var value of this.datalist){
if(value.indexOf(newText)>-1){
this.newDatalist.push(value);//一定要加this
}
}
}else{
this.newDatalist=["aaa","bbb","ccc","ddd","abcd"];//输入框为空，等于原始数据
}
}
},
computed:{
computedDatalist:function(){
return this.datalist.filter(item=>item.indexOf(this.inputText)>-1);//该数组元素包含输入框关键词
}
}
});
</script>
</body>
</html>
8328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
