在 Vue.js 中对数组进行排序 [英] Sort an array in Vue.js

问题描述

如何在 v-for 循环中显示数组之前按名称或性别对数组进行排序?https://jsfiddle.net/rg50h7hx/

<ul><li v-for="数组中的数组">{{ array.name }}</li>

//Vue.js v.2.1.8var string = new Vue({el: '#string',数据: {数组:[{名称:'卡诺'，性别:'男人'}，{名称:'前锋'，性别:'男人'}，{名称:'索尼娅'，性别:'女人'}，{名称:'辛德尔'，性别:'女人'}，{名称:'零下'，性别:'男人'}]}})

我必须使用计算"​​还是其他什么?

解决方案

是的，一个简单的方法是创建一个可以返回 sortedArray 的计算属性，如下所示:

计算:{排序数组:函数(){函数比较(a，b){如果(a.name  b.name)返回 1；返回0；}返回 this.arrays.sort(compare);}}

参见工作 演示.

您可以在此处找到排序文档a> 需要一个 compareFunction.

<块引用>

compareFunction 指定定义排序顺序的函数.如果省略，则数组按照每个字符的 Unicode 码位值排序，按照每个元素的字符串转换.

How can I sort an array by name or sex before displaying it in a v-for loop? 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' }
    ]
  }
})

Do I have to use a "computed", or whatever?

解决方案

Yes, an easy way to do this can be create a computed property which can return the sortedArray, like following:

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);
  }
}

See working demo.

You can find the documentation of sort here which takes a compareFunction.

compareFunction Specifies a function that defines the sort order. If omitted, the array is sorted according to each character's Unicode code point value, according to the string conversion of each element.

这篇关于在 Vue.js 中对数组进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！