列表渲染 v-for

v-for

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

?

1 2 3 4 5 6 7 8 9 10 11

<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() 的返回值来决定。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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 里使用范围值

?

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

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

v-for 与 v-if

?

1 2 3 4 5

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

组件上使用 v-for

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

?

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

数组变化侦测

变更方法#

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

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

替换一个数组

?

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

展示过滤或排序后的结果

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

?

1 2 3 4 5 6 7

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>