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>