列表渲染

基于数组的渲染

<template>
    <div class="div-box">
        <!--  v-for in -->
        <ul>
            <li v-for="(item, index) in items" :key="item.id">
                {{ item.text }} - {{ index }}
            </li>
        </ul>

        <!-- v-for of -->
        <ul>
            <li v-for="item of items" :key="item.id">
                {{ item.text }}
            </li>
        </ul>

        <!-- v-for destructuring -->
        <ul>
            <li v-for="({ id, text }, index) in items" :key="id">
                {{ text }} - {{ index }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
    { id: 4, text: 'Item 4' },
    { id: 5, text: 'Item 5' },
];
</script>

基于对象的渲染

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

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

<script setup lang="ts">
const myObject = {
    a: 1,
    b: 2,
    c: 3,
};
</script>

基于范围的渲染

v-for 可以直接接受一个整数值，表示渲染多少次，n 的初值从 1 开始。

<template>
    <div class="div-box">
        <!-- 12345678910 -->
        <span v-for="n in 10">{{ n }}</span>
    </div>
</template>

template 上的 v-for

如果需要渲染多个元素，可以将它们包装在一个 <template> 元素内，并使用 v-for 来渲染一个包含多个元素的块。

<template>
    <div class="div-box">
        <template v-for="item in items">
            <li>{{ item.role }}</li>
            <li>{{ item.msg }}</li>
        </template>
    </div>
</template>

<script setup lang="ts">
const items = [
    { role: 'Admin', msg: 'Welcome to the admin page' },
    { role: 'User', msg: 'Welcome to the user page' },
    { role: 'Guest', msg: 'Welcome to the guest page' },
];
</script>

v-for 与 v-if

在同一个元素上使用 v-if 和 v-for 时，v-if 比 v-for 优先级更高，这意味着 v-if 将无法访问到 v-for 中的变量。

推荐的做法是在外先包装一层 <template> 元素，在其上使用 v-for，然后在内部使用 v-if。

<template>
    <div class="div-box">
        <template v-for="todo in todos">
            <li>
                <span v-if="todo.isComplete">✔️</span>
                <span v-else>❌</span>
                {{ todo.name }}
            </li>
        </template>
    </div>
</template>

<script setup lang="ts">
const todos = [
    { name: 'Learn Vue 3', isComplete: false },
    { name: 'Learn Vue Router', isComplete: true },
    { name: 'Learn Vuex', isComplete: false },
];
</script>