vue列表的过滤
模糊搜索，并显示。
可以复制代码，自己去演示，看下效果。
用watch实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--注意改成你自己的路径-->
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-model收集用户的输入，双向绑定 -->
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="p in filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
keyWord:'',//初始为空串
persons:[
{id:'2001',name:'马冬梅',age:18,sex:'女'},
{id:'4002',name:'李冬瓜',age:19,sex:'女'},
{id:'6003',name:'墨冬',age:20,sex:'女'},
{id:'8004',name:'周杰伦',age:28,sex:'男'},
{id:'1907',name:'盖伦',age:21,sex:'男'},
{id:'8909',name:'温兆伦',age:20,sex:'男'},
],
filterPersons:[]//存放过滤后的，这是一个临时性的，动态变化的数组
},
watch:{
//当输入框里发生改变时(即keyWord发生变化时)，就调用
//位置参数：参1是新值，参2是旧值。这不需要旧值，所以只写一个参数即可
//任何串都包含了空字符'',下标为0。
keyWord:{
immediate:true, //初始化时调用一下handler（必须有，否则，初始时filterPersons是空数组，页面无数据）
//箭头函数其实和java中的Lambda表达式非常类似。不等于-1表示name里包含此关键字
handler(val){
this.filterPersons = this.persons.filter(p=>{
return p.name.indexOf(val) !==-1})
}
}
}
})
</script>
</body>
</html>
计算属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过滤，计算属性实现</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-model收集用户的输入 ，双向绑定-->
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="p in filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
keyWord:'',//初始为空串
persons:[
{id:'2001',name:'马冬梅',age:18,sex:'女'},
{id:'4002',name:'李冬瓜',age:19,sex:'女'},
{id:'6003',name:'墨冬',age:20,sex:'女'},
{id:'8004',name:'周杰伦',age:28,sex:'男'},
{id:'1907',name:'盖伦',age:21,sex:'男'},
{id:'8909',name:'温兆伦',age:20,sex:'男'},
],
},
computed:{
//2个时机会调用：初始时调用一次。当依赖的数据keyWord发生变化时就调用，
//只要数据参与了计算，则就依赖它
filterPersons(){
return this.persons.filter(p=>p.name.indexOf(this.keyWord)!==-1)
}
}
})
</script>
</body>
</html>
对比：对于此列，计算属性实现更简洁。
补充：
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成
参考资料
b站尚硅谷Vue视频教程