列表的数据排序是我们比较常用的功能之一，在此记录下vue中的排序写法，作为日常总结之需。
先上模板
{{item.age}}岁---{{item.name}}
{{btn_title}}
后上数据
data(){
return{
btn_title: '从小到大排序',
list: [{
id: 0,
name: '小明',
age: 18
},
{
id: 1,
name: '小王',
age: 15
},
{
id: 2,
name: '小苏',
age: 17
},
{
id: 3,
name: '小陈',
age: 21
}]
}
}
查看静态效果
效果.png
准备写方法啦~
methods: {
//列表排序函数,调用相应排序方法
listSort: function() {
if (this.btn_title == "从小到大排序") {
this.list.sort(this.asc_oder)
this.btn_title = "从大到小排序"
} else {
this.list.sort(this.desc_oder)
this.btn_title = "从小到大排序"
}
},
/**
* 年龄升序函数
* @param {Object} a 第一个人的信息
* @param {Object} b 第二个人的信息
*/
asc_oder: function(a, b) {
//这里注意传入的参数为对象，而我们要比较的是age
return a.age - b.age
},
/**
* 年龄降序函数
* @param {Object} a 第一个人的信息
* @param {Object} b 第二个人的信息
*/
desc_oder: function(a, b) {
return b.age - a.age
}
}
查看最终效果
最终效果.png
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
