<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
实现需求：模糊检索下列数据
1.收集用户的输入框的内容
2. 使用watch监视属性去监视keyWord的值（监视）
3.使用computed计算属性去实现
-->
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="请输入检索项" v-model = 'keyWord'>
<ul>
<li v-for="(p,index) in filpersons" :key='p.index'>
{{p.name}}--{{p.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
// new Vue({
// el:'#root',
// data:{
// keyWord : '',
// persons:[
// {id:'001',name:'张1',age:'15'},
// {id:'002',name:'李四',age:'20'},
// {id:'003',name:'王五',age:'30'}
// ],
// //filpersons:[]
// },
// // 第一种实现方式 监控
// watch:{
// keyWord:{
// //立即执行
// immediate:true,
// //拿取用户输入的内容keyWord(第一个值：现在的值,第二个值：修改前的值)
// handler(val){
// //filter 将person里不符合输入框内容过滤掉（注意：filter通过检索到对应数据后，会新生成对应的数组） indexOf判断是否包含相应的字符 ，不包含则是-1
// this.filpersons = this.persons.filter((p)=>{
// return p.name.indexOf(val) !== -1
// })
// }
// }
// }
// })
// 第二种实现方式 计算属性
new Vue({
el:'#root',
data:{
keyWord : '',
persons:[
{id:'001',name:'张1',age:'15'},
{id:'002',name:'李四',age:'20'},
{id:'003',name:'王五',age:'30'}
]
},
computed:{
filpersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord)!==-1;
})
}
}
})
</script>
</body>
</html>