列表渲染

@List Rendering

使用 for - in 渲染一个基于一个数组的列表 - render a list of items based on an array

更多信息，请访问列表渲染 - List Rendering

需显式的指定 :key 属性以区分并跟踪每个节点

要求数据项是唯一的，或具有独一无二的 id 属性

指定 :key 有助于提高渲染性能；据说数据变化时只会渲染更新的数据项，不会全部重新渲染

Array

1. 普通数组或对象数组

.1个参数：item是对数组元素的迭代变量，名字任意

<ul>
    <li v-for = "item in list" :key = "item.id" > {{ item }} </li>
</ul>

.2个参数：除了item外，还可以使用数据元素对应的索引index，名字任意

<ul>
    <li v-for = "(item, index) in list" :key = "item.id" > {{ item }} </li>
</ul>

2. 嵌套使用；每个迭代都使用独立的迭代变量

<ul>
    <li v-for = "(item, ind) in list" :key = "item.id" >
        <p v-for = "innerItem in item" :key = "innerItem.id" > {{ innerItem }} </p>
    </li>
</ul>

[] 渲染包含图片路径的列表

注意静态资源处理

const arr = [{
    id: 0,
    name: 'gl',
    age: 20,
    src: '10.jpg'
}]
const getImageUrl = (src) => {
    return new URL(`../imgs/${src}`, import.meta.url).href
}

<div class="item" v-for="item in arr" :key="item.id">
    <img :src="getImageUrl(item.src)" alt="picture">
    <p>{{ item.id }}</p>
    <p>{{ item.name }}</p>
    <p>{{ item.age }}</p>
</div>

Object

遍历一个对象的所有属性；默认显示对象的属性值

遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定

const obj = reactive({ id: 101, name: 'glpla', age: 18 })

.1个参数：值 value

<div v-for = "value in obj" > {{ value }} </div>

.2个参数：值 value，键 key

<div v-for = "(value, key) in obj" > {{ key }}:{{ value }} </div>

.3个参数：值 value，键 key，索引 index

<div v-for = "(value, key, index) in obj" > {{ index }}:{{ key }}:{{ value }} </div>

<template>

不推荐同时使用 v-if 和 v-for：二者优先级不明显

为区分结构，合理使用逻辑，特别是组合使用 v-for 和 v-if 时，可以使用 <template>；是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素

const list = ref(['home', 'product', 'about'])
const isOn = ref(true)

<template v-if = "isOn" >
    <div v-for = "item in list" > {{ item }} </div>
</template>

可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块

可以直接在组件上使用 v-for，和在一般的元素上使用没有区别