Vue3基础班04课 循环渲染

示例：循环指定次数

循环指定次数，有点像Python里面的for-range，可以让一个组件，在页面中渲染指定次数。比如，我们可以让“张三喜欢学Vue3”这句话循环渲染100次，1000次，甚至10000次。

循环渲染和重复概念不一样。重复一般指的是内容的重复，而循环指的是一个组件可以循环N次，但是每次循环，其内容可能是不一样的。比如我们让“张三”循环100次，可以构成“张三1，张三2，...，张三99”这样的数据。

循环的时候需要注意，我们必须要给一个属性key赋一个唯一的值，这个值通常可以是循环遍历得到的每个元素的索引index，如果你遍历的是表格数据，比如用户列表，列表中的每个元素都有一个唯一的ID属性，那么用ID作为key的值也是可以的。循环渲染的方式有很多种，下面的代码演示的是在组件本身上进行循环。

除了在组件本身上进行循环以外，当我们遇到需要对多个组件进行循环，但是这些组件又没有统一的父组件的时候，我们则可以在要循环的组件的外面加一个“tmplate”标签进行包裹，然后对template进行循环。这样做的好处在于，template渲染之后，是不会渲染为真实的标签的，也就是说最终的页面上不存在这个template标签，所以这样，我们不会影响被包裹代码的样式。

张三

喜欢学

Vue3

示例：渲染字符串数组

使用v-for="(value,index) in arr" :key="index"能够对字符串数据进行遍历，其中value表示字符串数组中的每一个元素，index表示每个元素对应的索引。

{{value}}

const arr = ["a", "b", "c"]

示例：渲染对象数组

在下面的案例中，我们使用v-for="(employee,index) in employees" :key="employee.id"去变量一个员工列表。其中employees是员工列表数组，这个数据一般是从后端接口中获取到的；employee是employees中的元素，存放的是每个员工的具体信息，包括ID，姓名，年龄等。

效果预览：

代码内容：

#

姓名

年龄

{{ index + 1 }}

{{ employee.name }}

{{ employee.age }}

const employees = [

{id: 1, name: "张三", age: 22},

{id: 2, name: "李四", age: 23},

{id: 3, name: "王五", age: 21},

]

table {

width: 500px;

margin: 0 auto;

border: 1px solid #ccc;

border-collapse: collapse;

}

thead, tbody, th, tr, td {

border: 1px solid #ccc;

border-collapse: collapse;

text-align: center;

}

tbody > tr:hover {

background-color: #ccc;

color: yellowgreen;

cursor: pointer;

font-size: 2em;

}

示例：渲染对象（字典）

JavaScript中的对象，其实可以理解为Python中的字典。不过Python中的字典一般是不存储方法的，而JavaScript中的对象，通常会存储方法之类的除了具体值以外的东西。不过JavaScript的对象也可以被当成字典使用，所以我们也可以用v-for去遍历JavaScript的对象。

通过v-for="(value,key,index) in zhangsan" :key="index"这种方式，我们可以对一个对象进行遍历。

key={{key}}  value={{value}}

{{value}}

const zhangsan = {

id: 1,

name: "张三",

age: 22

}