Vue 排序
在vue用sort()函数进行排序时,当数字位数不相同时,排序会有bug,这是个通病,在其他编程语言里也有同样的问题,我们只需要自己再定义一个方法即可。单数组排序:<div id="app"><ul><li v-for="item in soreItem">{{item}}&
·
在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>
更多推荐
已为社区贡献2条内容
所有评论(0)