列表渲染

v-for

数组 & 对象

Array

<!-- 值 -->
<li v-for="item in items">
  {{ item.message }}
</li>

<!-- 值，索引 -->
<li v-for="(item, index) in items">
  {{ item.message }} - {{ index }}
</li>

Object

<!-- 值 -->
<li v-for="value in myObject">
  {{ value }}
</li>

<!-- 值，键 -->
<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

<!-- 值，键，索引 -->
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

使用解构

<li v-for="{ message } in items">
  {{ message }}
</li>

<li v-for="({ message }, index) in items">
  {{ message }} - {{ index }}
</li>

多层嵌套的 v-for

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

of 作为分隔符来替代 in

<div v-for="item in items"></div>
<div v-for="item of items"></div>

<template> 上的 v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

⭐ 通过 key 管理状态

key 需尽量唯一，且不变。

<template v-for="todo in todos" :key="todo.id">
  <li>{{ todo.name }}</li>
</template>

常见问题

v-if 和 v-for 的优先级？

• vue2：v-for > v-if
• vue3： v-if > v-for

所以，在使用的时候不要在同一个元素上使用 v-if 和 v-for，对于开发人员会有”心智负担“。

巧记

• ​Vue2 像“超市购物车”：先装满所有商品（循环），再逐个检查是否过期（条件判断） → ​ 低效。
• ​Vue3 像“购物清单筛选”：先确定需要买什么（条件判断），再按清单采购（循环） → ​ 高效。

v-for 中的模板引用

ref 数组并不保证与源数组相同的顺序。

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = useTemplateRef('items')

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>