需求：Vue 在列表渲染的时候，能排序显示么。 比如按价格从大到小排序
问题原文地址：https://segmentfault.com/q/1010000004988322/a-1020000004988411
如果按照用下面的写法,结果是按string类型进行排序的，会出现1、11、2、3、4这样的如果，显然后面加个-1，则排序为4、3、2、11、1
// 定义vue范围及监听的变量
var demo = new Vue({
el: '#demo',
data: {
aaa: [{name: "山鹰登山社1",count: "1"},{name: "山鹰登山社11",count: "11"},{name: "山鹰登山社2",count: "2"},{name: "山鹰登山社3",count: "3"}]
}
})
// html
<section id="demo">
<ul>
<li v-for="item in aaa | orderBy 'count' -1">
...
</li>
</ul>
</section>
要显示为1、2、3、4、11，建议用orderBy function
// 定义vue范围及监听的变量
var demo = new Vue({
el: '#demo',
data: {
aaa: [{name: "山鹰登山社1",count: "1"},{name: "山鹰登山社11",count: "11"},{name: "山鹰登山社2",count: "2"},{name: "山鹰登山社3",count: "3"}]
},
methods: {
numSort: function (a,b) {
return a.count-b.count;
}
}
})
// html
<section id="demo">
<ul>
<li v-for="item in aaa | orderBy numSort">
...
</li>
</ul>
</section>