Vue 循环渲染 v-for

2023-12-14 22:56:30

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 表示循环的对象。

原创作者:吴小糖

创建时间:2023.12.14

文章来源:https://blog.csdn.net/xiaowude_boke/article/details/135005291
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。