vue按年龄排序--- highlight: tomorrow-night --- ```java {{indexA}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按年龄排序</title>
	</head>
	<body>
		<!-- 
		 -->
		<div id="d1">
			<ul>
				<li v-for="(uu, indexA) in js">
					{{indexA}}----{{uu.username}}----{{uu.age}}
				</li>
			</ul>
			要查询的数据：<input type="text" v-model="s" />
			<button @click="zx()">正序</button>
			<button @click="fx()">反序</button>
			<button @click="hf()">恢复</button>
		</div>
		<script type="application/javascript" src="../js/vue.js"></script>
		<script type="application/javascript">
			new Vue({
			  el: '#d1',
			  data: {
				user : [
					{username:'张三',age:19},
					{username:'李四',age:18},
					{username:'王五',age:25},
					{username:'赵六',age:22}
				],
				s : ""
			  },
			 
			  methods : {
				  zx(){
					  this.user.sort(function(u1, u2){
						  return u1.age-u2.age;
					  });
				  },
				  fx(){
					  this.user.sort(function(u1, u2){
					  		return u2.age-u1.age;
					  });
				  },
				  hf(){
					  this.user.sort(function(u1, u2){
					  		return u1.username-u2.username;
					  });
				  }
				  
			  },
			  computed : {
				  /* 过滤后的数组*/
				  js : {
					  get(){
						  var va = this.s;
						  var arr = this.user.filter(function(o){
							  return o.username.indexOf(va)!==-1;
						  });
						  return arr;
					  }
				  }
			  }
			})
		</script>
	</body>
</html>