如何在v-for循环中显示数组之前按名称或性别对数组进行排序? https://jsfiddle.net/rg50h7hx/
<div id="string">
<ul>
<li v-for="array in arrays">{{ array.name }}</li>
</ul>
</div>
// Vue.js v. 2.1.8
var string = new Vue({
el: '#string',
data: {
arrays: [
{ name: 'kano', sex: 'man' },
{ name: 'striker', sex: 'man' },
{ name: 'sonya', sex: 'woman' },
{ name: 'sindell', sex: 'woman' },
{ name: 'subzero', sex: 'man' }
]
}
})
我是否必须使用&#34;计算&#34;或其他什么?
答案 0 :(得分:41)
是的,一个简单的方法是创建一个可以返回sortedArray的计算属性,如下所示:
computed: {
sortedArray: function() {
function compare(a, b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0;
}
return this.arrays.sort(compare);
}
}
见工作demo。
您可以找到排序here的文档,其中包含compareFunction。
compareFunction指定定义排序顺序的函数。如果省略,则根据每个元素的字符串转换,根据每个字符的Unicode代码点值对数组进行排序。
答案 1 :(得分:17)
带箭头功能es6:
sortedArray(){
return this.arrays.sort((a, b) => a.name - b.name );
}
答案 2 :(得分:7)
Html方
<div id="string">
<ul>
<li v-for="array in sortArrays(arrays)">{{ array.name }}</li>
</ul>
</div>
Vue js code ||使用Lodash
var string = new Vue({
el: '#string',
data: {
arrays: [
{ name: 'kano', sex: 'man' },
{ name: 'striker', sex: 'man' },
{ name: 'sonya', sex: 'woman' },
{ name: 'sindell', sex: 'woman' },
{ name: 'subzero', sex: 'man' }
]
},
methods: {
sortArrays(arrays) {
return _.orderBy(arrays, 'name', 'asc');
}
}
})
答案 3 :(得分:1)
简便的方法; 您可以使用计算数组而不是数组
computed: {
computedFonksiyon() {
this.arrays.sort(function(x, y) {
return y.name- x.name;
});
return this.arrays;
}
}
答案 4 :(得分:0)
这真的很酷:
sortFunc: function (){
return this.arrays.slice().sort(function(a, b){
return (a.name > b.name) ? 1 : -1;
});
}
从HTML调用函数:
<div id="string">
<ul>
<li v-for="array in sortFunc()">{{ array.name }}</li>
</ul>
</div>