Vue3 循环渲染 v-for

news2024/11/15 16:23:58

v-for 指令：用于循环渲染列表数据。

v-for 指令：可以循环数组、对象、字符串【不常用】、指定次数【很少用】。

key 属性：用于给标签添加一个唯一的标识。

key 属性：推荐使用 id、手机号、身份证号、学号等唯一值。

注：当数据改变后，Vue 会对比 key 属性，只更新被修改的内容，以减少不必要的更新。

语法格式：

// 循环数组
<div v-for="(项目, 下标) in 数组" :key="标识">内容</div>

// 循环对象
<div v-for="(键值, 键名) in 对象" :key="标识">内容</div>

// 循环字符串
<div v-for="(字符, 下标) in 字符串" :key="标识">内容</div>

// 指定循环次数
<div v-for="(数字, 下标) in 次数" :key="标识">内容</div>

// 也可以用 of 替代 in 作为分隔符，效果一样
<div v-for="(项目, 下标) of 数组" :key="标识">内容</div>

循环数组【常用】：

<template>
  <h3>循环渲染 v-for</h3>
  <ul>
    <li v-for="(item, index) in data" :key="item.id">
      {{ index }} - {{ item.name }} - {{ item.age }}
    </li>
  </ul>
</template>

<script setup>
import { reactive } from "vue";
let data = reactive([
  { id: 1, name: "张三", age: 21 },
  { id: 2, name: "李四", age: 18 },
  { id: 3, name: "王五", age: 26 },
]);
</script>

效果：

注：item 表示数组中的每一项、index 表示循环的下标、data 表示循环的数据。

循环对象：

<template>
  <h3>循环渲染 v-for</h3>
  <ul>
    <li v-for="(val, k) in car" :key="k">
      {{ val }} - {{ k }}
    </li>
  </ul>
</template>

<script setup>
import { reactive } from "vue";
let car = reactive({
  name: "奥迪A8",
  price: "70万",
  color: "黑色"
});
</script>

注：val 表示对象中的值、k 表示对象中的键名、car 表示循环的对象。

循环字符串：

<template>
  <h3>循环渲染 v-for</h3>
  <ul>
    <li v-for="(char, index) in str" :key="index">
      {{ char }} - {{ index }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from "vue";
let str = ref("hello");
</script>