一、列表循环

使用下述代码替换 app.vue中的代码

<script setup>
// 定义一个字典数据用于输出
const names = ['张三', '李四']
</script>

<template>
    <!--使用in的列表输出-->
    <div style="float:left">
        <h3>只输出value</h3>
        <p v-for="name in names">{{name}}</p>
    </div>

    <!--使用if的列表输出-->
    <div style="float:left; margin-left: 50px">
        <h3>使用if的列表输出</h3>
        <p v-for="name of names">{{name}}</p>
    </div>

    <!--输出列表的索引-->
    <div style="float:left; margin-left: 50px">
        <h3>输出列表的索引</h3>
        <p v-for="(name, index) in names">index = {{index}}, name = {{name}}</p>
    </div>
</template>

二、字典循环

使用下述代码替换 app.vue中的代码

<script setup>
// 定义一个字典数据用于输出
const userData = {
    "name": "张三",
    "age":17
}
</script>

<template>
    <!--只输出值-->
    <div style="float:left">
        <h3>只输出value</h3>
        <p v-for="user of userData">{{user}}</p>
    </div>

    <!--输出key和value-->
    <div style="float:left; margin-left: 50px">
        <h3>输出key和value</h3>
        <p v-for="(value, key) in userData">key = {{key}}, value = {{value}}</p>
    </div>

    <!--输出key、value、和index-->
    <div style="float:left; margin-left: 50px">
        <h3>输出key、value、和index</h3>
        <p v-for="(value, key, index) in userData">index = {{index}}, key = {{key}}, value = {{value}}</p>
    </div>
</template>

特别说明：

• 循环的时候最好绑定一个key， 这样当循环对象发生变化的时候就只是调整顺序而不是重新加载。建议：
  • 列表数据：元素数量确定不会变更的情况下，绑定index为key，如果无法确定元素数量是否会变更，则不绑定
  • 字典数据：不管元素数量是是否会发生变化，都建议绑定字典数据的key为key
• 当v-for和v-if同时使用时，v-if的优先级会更高。因此v-if将无法读取v-for循环中的元素