Vue列表显示过滤/排序后的结果

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

例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

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

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li> 
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

分类Vue列表渲染相关推荐:

Vue 列表用 v-for 把一个数组对应为一组元素 Vue列表维护状态v-bind:key Vue列表数组的方法 Vue列表数组的替换方法 Vue列表显示过滤/排序后的结果 Vue 在 v-for 里使用值范围 Vue 在 <template> 上使用 v-for Vue中v-for 与 v-if 一同使用 Vue 在组件上使用 v-for

你我学习网

Vue教程文档

Vue列表显示过滤/排序后的结果

分类Vue列表渲染相关推荐:

热门教程导航