显示过滤/排序后的结果

有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际改变或重置原始数据。在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。

例如:

  1. <li v-for="n in evenNumbers">{{ n }}</li>
  1. data: {
  2. numbers: [ 1, 2, 3, 4, 5 ]
  3. },
  4. computed: {
  5. evenNumbers: function () {
  6. return this.numbers.filter(function (number) {
  7. return number % 2 === 0
  8. })
  9. }
  10. }

在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个方法:

  1. <li v-for="n in even(numbers)">{{ n }}</li>
  1. data: {
  2. numbers: [ 1, 2, 3, 4, 5 ]
  3. },
  4. methods: {
  5. even: function (numbers) {
  6. return numbers.filter(function (number) {
  7. return number % 2 === 0
  8. })
  9. }
  10. }