它解决的问题

根据内容集合重复渲染展示html标签，也就是遍历迭代。

也就是我们网页要渲染很多重复性的组件，比如一个图书网站，重复按照一个结构展示各个图书（或者热门100个图书）。

像这里丸子展示的是奥运金牌的最新3个项目的数量。一起为我们的奥运健儿加油吧！！！冲呀

用法

v-for 用户重复输出模版内容，并在每次迭代替换模版为当前迭代的对象（比如当前对象，和下标等）

<li v-for="(item,index) of projects"> {{item}} - {{index}} </li>

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue3青铜到黄金-丸子酱-奥运金牌 vue-for</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue3.1.5_vue.global.js"></script>
</head>
<body background="/1aoyunjiayou.jpg" style="background-size:1000px 1000px;" >
    <div id="wzApp">
<span style="background-color:red">先继续为我们的运动员加个油！！！</span>
<h3><a v-bind:href="url">点击访问->子酱@CSDN博客</a></h3>
<h3>这里展示没用y-for</h3>
<ul>
   <li>第38枚金牌 男子跳水项目</li>
   <li>第37枚金牌 女子500米 赛艇</li>
   <li>第36枚金牌 女子标枪田径</li>
</ul>
<h3> v-for item in projects </h3>
<ul v-for="item in projects ">
   <li>{{item}}{{index}}</li>
</ul>
<h3> v-for (item, index) in </h3>
<ul v-for="(item, index) in  projects">
  <li>{{item}} - {{index}} </li>
</ul>
<h3> vue style</h3>
<ul>
    <li v-for="(item,index) of projects"> {{item}} - {{index}} </li>
</ul>
    </div>
</body>
<script>
    const { createApp } = Vue
    const url = 'https://blog.csdn.net/qq_28008615'
    const projects = ['男子跳水','女子赛艇','女子标枪'] 
    const app = {
        setup() {
            return {
                url,
                projects
            }
        }
    }   
    createApp(app).mount('#wzApp')
</script>
</html>

效果如下：

在这里插入图片描述

解析

上面展示了v-ifor的几种用法。

v-for item in projects
v-for (item , index) in projects
还有vue风格的for循环。

这里特别查看了v-for(item, index) in这种用法的最后一个。
我们可以看到跟下面vue style的渲染很不一样，总体v-for会把当前标签迭代了，不管是li还是ul标签。

推荐使用vue-style，进行更细致的渲染（不重复输出ul标签。）

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢

vue3前端青铜到黄金王者 - 第五个入门v-for循环为奥运加油！

它解决的问题

用法

代码展示

效果如下：

解析