vue搜索过滤和排序
vue搜索过滤和排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>搜索过滤和排序</h1>
<input type="text" v-model="sm"/>
<ul>
<!--使用计算属性-->
<li v-for="(s,index) in searchStudent" :key="index">
name:<span v-text="s.name"></span>,
age:<span v-text="s.age"></span>
</li>
</ul>
<button @click="xss(1)">年龄升序</button>
<button @click="xss(2)">年龄降序</button>
<button @click="xss(0)">原本顺序</button>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
sm:'',
sx:0,
student:[
{name:'wag',age:1},
{name:'jia',age:2},
{name:'san',age:23},
{name:'joo',age:4}
]
},
computed:{
//相关属性发生变化后执行
//输入框输入时导致sm属性发生变化，导致函数触发
searchStudent(){
//const {fStu,sm,sx}=this;//第二种定义方式 下方可直接使用
//筛选
let fStu;
fStu=this.student.filter(p=>p.name.indexOf(this.sm)!==-1);
let sx=this.sx;
//排序
if(this.sx!==0){
fStu.sort(function(p1,p2){
if(sx==2){
return p2.age-p1.age;
}else{
return p1.age-p2.age;
}
});
}
return fStu;
}
},
methods:{
//事件
xss(value){
//sx属性发生变化，导致searchStudent计算属性的方法开始执行
this.sx=value;
}
}
})
</script>
</body>
</html>
fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。