列表过滤
实现方式：
- watch实现
必须采用 immediate 实现页面初始化时加载列表。
<input type="text" v-model="keyword"></input>
<ul>
<li v-for="(p, index) in filterPerson" :key="index">
</li>
</ul>
watch:{
// 要监视的属性
keyword:{
immediate: true,
handler(newValue){
this.filterPerson = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1;
});
}
}
}- 计算属性实现：return方式
使用两个return实现。
computed:{
// 直接要计算的属性,相当于get()
filterPerson(){
return this.persons = this.person.filter((p)=>{
// keyword必须赋值初始化
return p.name.indexOf(this.keyword) !== -1;
})
}
}💡 js中的字符串在匹配空串时，会返回 0 而不是 -1，例如 ‘abc’.indexOf(’’) == 0，可以利用这个特性来获取整个数组，例如上述例子中的return语句。
列表排序
computed:{
filterPersons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyword) !== -1;
})
// 判断是否需要排序
if (this.sortType) {
arr.sort((p1, p2) =>{
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
});
}
return arr;
}
}数组的push是原型的push；vue管理后，array的push不再是原型的push，而是一个封装。
