vue文档学习笔记之列表渲染---展示过滤或排序后的结果

唧唧bong_

于 2023-11-07 15:36:05 发布

阅读量108

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_67992720/article/details/134268697

版权

文章介绍了在Vue.js中如何使用计算属性对数组进行过滤和排序，以及在计算属性不可用时的替代方法。示例展示了如何在模板中实现这些功能并链接到Vue文档.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

举例来说：

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})

template

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

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

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}

template

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