被迫走上前端之路第六课之vue的v-for列表渲染

有时候我们需要动态显示一些标签重复的内容或者可迭代数据，如果手动一条条实现有点麻烦，而且代码看着不美观，这个时候就要用到v-for来实现

语法

其中，items是可迭代的对象

<!--写法一-->
<div v-for="item in items"></div>
<!--写法二-->
<div v-for="item of items"></div>

注：有时给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key
语法如下：

<div v-for="(item,index) in items" :key="index"></div>

这里的index相当于给循环的每个标签加了一个序号，然后通过key与该标签绑定，这样就可以唯一识别和追踪每个循环的标签（当然你也可以绑定别的值）

举个栗子

动态显示数组

<script setup>
const arr=[1,2,3,4,5,6]
</script>

<template><