Vue基础(12)_Vue.js循环语句用法：列表渲染-海口c网

Vue基础(12)_Vue.js循环语句用法：列表渲染

article/2025/6/23 9:44:45

js补充

术语解释
循环(loop)：最基础的概念, 所有重复的行为。
递归(recursion)：在函数内调用自身, 将复杂情况逐步转化成基本情况。
(数学)迭代(iterate) ：在多次循环中逐步接近结果。
(编程)迭代(iterate) ：按顺序访问线性结构中的每一项。
遍历(traversal) ：按规则访问非线性结构中的每一项。

for...in 循环【ES5】

for...in 语句迭代一个对象的所有可枚举字符串属性（除 Symbol 以外），包括继承的可枚举属性。
语法：
for (variable in object){
...
}
参数：
variable：在每次迭代时接收一个字符串属性名。它可以通过使用 const、let 或 var 进行声明，也可以是一个赋值目标（例如，先前声明的变量、对象属性或解构模式）。使用 var 声明的变量不会局限于循环内部，即它们与 for...in 循环所在的作用域相同。
object：被迭代非符号可枚举属性的对象。

for of 循环【ES6】

for...of 语句执行一个循环，该循环处理来自可迭代对象的值序列。可迭代对象包括内置对象的实例，例如 Array、String、TypedArray、Map、Set、NodeList（以及其他 DOM 集合），还包括 arguments 对象、由生成器函数生成的生成器，以及用户定义的可迭代对象。

语法：
for (variable of iterable){
...
}
参数：
variable:每次迭代时从序列接收一个值。可以是用 const、let 或 var 声明的变量，也可以是赋值目标（例如之前声明的变量、对象属性或解构模式）。使用 var 声明的变量不会局限于循环内部，即它们与 for...of 循环所在的作用域相同。
iterable:可迭代对象。循环操作的序列值的来源。

for...of 与 for...in 之间的区别

for...in 和 for...of 语句都用于迭代某个内容，它们之间的主要区别在于迭代的对象。for...in 语句用于迭代对象的可枚举字符串属性，而 for...of 语句用于迭代可迭代对象定义的要进行迭代的值。

举例：

        Object.prototype.objCustom = function () { };Array.prototype.arrCustom = function () { };const iterable = [3, 5, 7];iterable.foo = "hello";for (const i in iterable) {console.log(i);}// "0"、"1"、"2"、"foo"、"arrCustom"、"objCustom"for (const i in iterable) {if (Object.hasOwn(iterable, i)) {console.log(i);}}// "0" "1" "2" "foo"for (const i of iterable) {console.log(i);}// 3 5 7

分析：

1、iterable 对象继承了 objCustom 和 arrCustom 属性，因为其原型链中同时包含了 Object.prototype 和 Array.prototype。

2、for...in 循环仅打印了 iterable 对象的可枚举属性。它不会打印数组中的元素 3、5、7 或 "hello"，因为它们不是属性，而是值。它打印了数组的索以及 arrCustom 和 objCustom，它们是实际的属性。

3、第二个循环与第一个循环类似，但它使用 Object.hasOwn() 来检查找到的可枚举属性是否为对象的自有属性，即非继承属性。如果是，则打印该属性。属性 0、1、2 和 foo 被打印，因为它们是自有属性。属性 arrCustom 和 objCustom 没有被打印，因为它们是继承属性。

4、for...of 循环迭代并打印 iterable 按照数组（数组是可迭代的）定义要进行迭代的值。对象的元素 3、5、7 被打印，但对象的属性没有被打印。

Vue.js 循环语句用法：列表渲染

在 Vue 中，循环语句主要通过 v-for 指令来实现，用于遍历数组或对象，生成对应数量的元素。在元素上使用 v-for 指令，根据源数据的数组或对象进行循环渲染元素。

遍历数组：

v-for="(item, index) in items" :key="..."

可选值：index

遍历对象：

v-for="(value, key, index) in object" :key="..."

可选值：key、index

可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)。
key 的作用: 使用 v-for 渲染列表时，必须为每个项提供一个唯一的 key 属性，以便 Vue 能够识别每个项的唯一性，从而进行高效的 DOM 更新。
嵌套循环: 可以嵌套使用多个 v-for 来渲染多维数组或对象结构。
补充：v-for 中的 in 和 of 是遍历数据时的两个常用关键字，它们的主要区别在于：in 更通用，可以遍历数组、对象和整数范围；而 of 专注于遍历可迭代对象（如数组、字符串、Set、Map 等）。

举例：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>Vue.js循环语句用法：列表渲染</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><h2 style="color:chocolate;">Vue.js循环语句用法：列表渲染</h2><!-- 遍历对象数组 --><h3>遍历人员列表</h3><ul><li v-for="p in persons" :key="p.id">{{p.id}}--{{p.name}}-{{p.age}}</li></ul><!-- 遍历对象 --><h3>遍历汽车信息</h3><ul><li v-for="(value,key,index) in car" :key="key">{{index}}--{{key}}--{{value}}</li></ul><!-- 遍历字符串(用的很少) --><h3>遍历字符串(用的很少)</h3><ul><li v-for="(char,index) in str" :key="index">{{index}}--{{char}}</li></ul><!-- 遍历指定次数(用的很少) --><h3>遍历指定次数(用的很少)</h3><ul><!-- 遍历5次 --><li v-for="(number,index) in 5" :key="index">{{index}}--{{number}}</li></ul></div><script>new Vue({el: '#root',data: {persons: [{ id: '001', name: '张三', age: 21 },{ id: '002', name: '李四', age: 22 },{ id: '003', name: '王五', age: 23 }],car: {name: '奥迪A8',price: '70万',color: '蓝色'},str: 'hello'}})</script>
</body></html>