列表渲染 v-for

v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

<template>
  <h2>v-for练习</h2>
  <li v-for="(item,index) of items" :key="item">
    {{ index }}- {{ item.message }}
  </li>
</template>

<script setup>
import { ref } from 'vue';
const items=ref([{message: 'Foo'},{message: 'Bar'}])
</script>

其中 items 是源数据的数组，而 item 是迭代项的别名，index 是索引号（可以省略），key 键名

推荐在任何可行的时候为 v-for 提供一个 key attribute，key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

v-for 与对象

使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

<template>
    <ul>
    <li v-for="(value,key,index) in myObject" :key="value">
      {{ key }}: {{ value }}:{{ index }}
    </li>
  </ul>
</template>

<script setup>
import { ref,reactive } from 'vue';

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

</script>

　说明：value :属性的值，key :属性名，index: 索引

在 v-for 里使用范围值

<span v-for="n in 10">{{ n }}</span>

　　注意：此处 n 的初值是从 1 开始而非 0。n 也无须声明

v-for 与 v-if

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

组件上使用 v-for

可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：

<MyComponent v-for="item in items" :key="item.id" />

数组变化侦测

变更方法#

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换一个数组

// `items` 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))

展示过滤或排序后的结果

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

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

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

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