在Vue.js中对数组进行排序

时间:2017-03-19 06:59:57

标签: vuejs2

如何在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;或其他什么?

5 个答案:

答案 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');
        }
  }
})
  • 在orderBy函数中,第一个参数是数组,第二个参数是键(名称/性别)第三个参数是顺序(asc / desc)

答案 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>