Vue3 循环渲染 v-for

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

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

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

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

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

语法格式：

// 循环数组内容// 循环对象内容// 循环字符串内容// 指定循环次数内容// 也可以用 of 替代 in 作为分隔符，效果一样内容

循环数组【常用】：

  
循环渲染 v-for
  

• {{ index }} - {{ item.name }} - {{ item.age }}

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

效果：

 

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

循环对象：

 

  
循环渲染 v-for
  

• {{ val }} - {{ k }}

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

 

 

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

 

循环字符串：

  
循环渲染 v-for
  

• {{ char }} - {{ index }}

import { ref } from "vue";let str = ref("hello");

 原创作者：吴小糖

 创作时间：2024.3.2