Vue 排序

在vue用sort()函数进行排序时，当数字位数不相同时，排序会有bug，这是个通病，在其他编程语言里也有同样的问题，我们只需要自己再定义一个方法即可。

单数组排序：

<div id="app">
	<ul>
		<li v-for="item in soreItem">{{item}}</li>
	</ul>
</div>

<script>
	var app = new Vue({
		el:"#app",
		data:{
			items: [1996,03,25,22]
		},
		computed:{
			soreItem(){
			    return this.items.sort()
    // 1996 22 25 3 此处排序有bug ,当位数不相同时，只会比较第一位，并不是从小到大的顺序排序
			}
		}
	})
</script>

改进后：

<div id="app">
	<ul>
		<li v-for="item in soreItem">{{item}}</li>
	</ul>
</div>

<script>
	var app = new Vue({
		el:"#app",
		data:{
			items: [1996,03,25,22]
		},
		computed:{
			soreItem(){
				return this.items.sort(function(n,m){
					return n - m
				})
            // 3 22 25 1996 这样排序就正确了
			}
		}
	})
</script>

我们还可以在后面跟上.reverse(),进行倒序排序

soreItem(){
	return this.items.sort(function(n,m){
		return n - m
	}).reverse();
}

数组对象排序：

 

<script>
		var app = new Vue({
			el:"#app",
			data:{
				students:[
					{name:"小明",score:68},
					{name:"小红",score:84},
					{name:"小伟",score:59},
					{name:"小付",score:100}
				]
			},
			computed:{
				soreStudents(){
				  	return sortByKey(this.students,'score');
				}
			}
		})

		//数组对象方法排序:
		function sortByKey(array,key){
		    return array.sort(function(a,b){
		      var x=a[key];
		      var y=b[key];
		      return ((x<y)?-1:((x>y)?1:0));
		   });
		}
	</script>

html代码

<li v-for="(student,index) in soreStudents">
	{{index+1}}.姓名：{{student.name}}，成绩{{student.score}}
</li>