一、列表搜索
1.列表过滤
要求:在输入输入字符,显示含有该字符的信息。
列表过滤是通过计算来显示过滤结果的。
页面内容:
<input type="text"v-model="searchName">
<ul>
<li v-for="(p, index) in filterPerson" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
const vm=new Vue({
el:"#app",
data:{
orderType:0,//0表示正常顺序,1表示升序,2表示降序
searchName:'',//查找的值
person:[
{name:'Jack',age:18},
{name:'Bob',age:19},
{name:'lisa',age:20},
{name:'rose',age:21}
]
},
computed:{
//计算最终搜索的值
filterPerson(){
//取出相关的数据
const {searchName,person,orderType} =this;//解构重组
//定义最终需要显示的数组
let ePerson;
//对person进行过滤
ePerson=person.filter(p=>p.name.indexOf(searchName)!==-1);
return ePerson;
}
}
})
ePerson=person.filter(p=>p.name.indexOf(searchName)!==-1);
indexOf的返回值不等于-1表示已经查找到该字符的情况
p=>p.name.indexOf(searchName)!==-1是一个箭头函数
//相当于:
function fun(p){
return p.name.indexOf(searchName)!==-1;
}
ePerson=person.filter(fun);
2.列表排序
<div>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
排序使用sort(x)方法,x必须是一个函数。
//在搜索时就进行按年龄排序
if(orderType!==0){
ePerson.sort(function(p1,p2){//p1-p2表示升序,p2-p1表示降序
if(orderType===1){
return p1.age-p2.age;//升序
}else{
return p2.age-p1.age;//降序
}
})
}
methods: {
setOrderType(orderType){
this.orderType=orderType;//把按钮的orderType赋值给this的orderTy
}
},