<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root" >
<input type="text" v-model = 'keyWords' placeholder="请输入您要遍历的内容">
// <div v-for='(item,index) in newPerson' :key='item.id'>
// {{item.name}} - {{item.age}} -{{item.sex}}
// </div>
<div v-for='(item,index) in newPersons2' :key='item.id'>
{{item.name}} - {{item.age}} -{{item.sex}}
</div>
</div>
<script type='text/javascript'>
Vue.config.productionTip = false
let vm = new Vue({
el:'#root',
data:{
persons:[
{id:001,name:'周冬雨',age:18,sex:'famale'},
{id:002,name:'马冬梅',age:17,sex:'male'},
{id:003,name:'周杰伦',age:18,sex:'famale'},
{id:004,name:'冯艾伦',age:19,sex:'male'}
],
keyWords:'',
newPerson:[]
},
// watch:{
// keyWords:{
// immediate:true, // 默认执行一次
// handler(val){
// this.newPerson = this.persons.filter((item)=>{
// return item.name.indexOf(val) >= 0;
// })
// }
// }
// },
computed:{
newPersons2(){
return this.persons.filter((item)=>{
return item.name.indexOf(this.keyWords) >= 0;
})
}
}
})
</script>
</body>
</html>
注意事项:
1.过滤方法filter 过滤数据返回一个新数组 return 后面加条件;
2.indexOf(’’)为空字符串时,返回全部数据,输入其他值的时候返回到是位置下标0123,-1不存在;
3.计算属性必须有个返回值