Vue3进阶：循环语句的介绍和编码使用详解（附代码与群资料）

v-for指令

对数组的遍历

对对象的遍历

结合template使用循环指令的模板示例

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

Vue3是一种功能强大的JavaScript框架，它提供了许多用于构建用户界面的工具和功能。其中之一是循环语句，它允许开发者轻松地遍历和渲染数组或对象的内容。

在上一篇文章《Vue3进阶：条件语句控制内容展示的介绍和编码使用详解（附代码与群资料）》中我介绍到Vue3的条件语句功能提供了一种灵活而强大的方式来根据条件进行DOM元素的渲染。使用v-if指令，可以根据表达式的真假来显示或隐藏DOM元素；使用v-show指令，可以通过CSS的display属性来控制元素的显示和隐藏。

在实际开发中，根据具体的需求和场景选择适合的条件语句方式是很重要的。如果需要在不同的条件之间进行选择，可以使用v-if和v-else指令；如果需要频繁切换显示和隐藏的元素，可以使用v-show指令。

原文：Vue3进阶：循环语句的介绍和编码使用详解（附代码与群资料）

那么，在本文中，我们将详细介绍Vue3中循环语句的使用方法和示例。最基础的v-for循环的指令使用，以及其他的指令详细介绍可以参考前面的文章《Vue3进阶：简化前端开发的利器，以及常用指令汇总详解》和《Vue3进阶：常用的指令缩写详解，以及代码使用示例》。

v-for指令

在Vue3中，使用v-for指令来实现循环渲染。v-for指令可以用于数组和对象的遍历，并根据遍历的结果生成相应的DOM元素。

对数组的遍历

对于数组的遍历，我们可以使用v-for指令来遍历数组的每个元素，并使用特定变量来引用当前元素。

下面是一个简单的例子：

<!--对数组的遍历--><ol>    <li v-for="(item,index) in items" :key="item.id">索引：{
   
   {index}}  元素：{
   
   {item}}</li></ol>
<!--在template中使用v-for--><ul>    <template v-for="item in items">        <li>{
   
   {item.id}} {
   
   {item.name}}</li>    </template></ul>
<script>    const VueApp = {
   
           data() {
   
               return {
   
                   items: [                    {id: 11, name: 'steverocket1'},                    {id: 22, name: 'steverocket2'},                    {id: 33, name: 'steverocket3'},                    {id: 44, name: 'steverocket4'},                    {id: 55, name: 'steverocket5'},                ]            }        }    }    Vue.createApp(VueApp).mount('body')</script>

在这个例子中，通过v-for指令遍历`items`数组的每个元素，并使用`item`变量引用当前元素。在生成的DOM中，每个元素的名称会被渲染到一个`<li>`标签中。

请注意，我们还添加了`:key`属性来为循环的每个元素提供一个唯一的标识符。这样做是为了帮助Vue更高效地追踪和更新DOM元素。

输出结果

在这个循环的代码示例中，我们访问了当前元素的索引，这是Vue3提供的特殊变量`index`来表示当前元素的索引。

对对象的遍历

除了数组，我们还可以使用v-for指令来遍历对象的属性。下面是一个示例：

<ul>    <li v-for="(value, key) in itemObject" :key="key"> key:{
   
   {key}} value:{
   
   {value}}</li></ul><script>    const VueApp = {
   
           data() {
   
               return {
   
                   itemObject: {
   
                       11: "CTO Plus",                    22: "SteveRocket",                    33: "Vue的v-for循环"                }            }        }    }    Vue.createApp(VueApp).mount('body')</script>

在这个例子中，通过v-for指令遍历`itemObject`对象的属性，并使用`value`和`key`变量分别引用当前属性的值和键。在生成的DOM中，每个属性的键和值会被渲染到一个`<li>`标签中。

结合template使用循环指令的模板示例

在一些情况下，我们可能希望在循环中使用多个DOM元素而不是一个单独的元素。Vue3提供了一个`<template>`标签，可以用作循环的模板片段。

下面是一个示例：

<template><div>    <ul>        <template v-for="(item, index) in items">            <li :key="item.id">item.name</li>            <li>索引值：{
   
   { index }}</li>        </template>    </ul></div></template>

在这个例子中，我们使用`<template>`标签来包裹多个`<li>`元素，作为循环的模板片段。生成的DOM中，每个`<li>`元素都会根据循环的每个元素来进行渲染。

v-for遍历整数

<p v-for="number in 10">{ {number}}</p>

输出结果

对数据进行处理（排序、过滤）

numbers：{
   
   {numbers}}<div v-for="num in calcNumbers">{
   
   {num}}</div><script>    const VueApp = {
   
           data() {
   
               return {
   
                   numbers: [11,22,33,44,55,66]            }        },
        computed: {
   
               calcNumbers() {
   
                   return this.numbers.filter(number => number % 2 === 0)            }        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

v-if与v-for结合使用的示例

在 Vue 3 中，还可以将 `v-if` 与 `v-for` 结合使用，以根据条件对列表进行渲染。

<!--v-if和v-for的结合使用--><div>    <ul>        <li v-for="(item,index) in items">            <div v-if="item.isShow">{
   
   {index}} {
   
   {item.id}} {
   
   {item.name}} {
   
   {item.isShow}}</div>        </li>    </ul></div><script>    const VueApp = {
   
           data() {
   
               return {
   
                   items: [                    {id: 11, name: 'steverocket1', isShow:true},                    {id: 22, name: 'steverocket2', isShow:false},                    {id: 33, name: 'steverocket3', isShow:true},                    {id: 44, name: 'steverocket4', isShow:"false"},                    {id: 55, name: 'steverocket5', isShow:1},                ]            }        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

在上述例子中，只有 `item.isShow` 为 `true` 的项才会被渲染为列表中的一个 `<li>` 元素。注意：非布尔的false，均为真值。

在组件上使用 v-for

这里简单提一下，v-for也可以在组件中使用。关于组件的详细介绍我将在公众号CTO Plus后面的文章《Vue3进阶：组件的介绍、使用详解和代码实战案例》中做详细介绍，敬请关注。

在自定义组件上，我们可以像在任何普通元素上一样使用 v-for：

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props

<my-component

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

:item="item"

:index="index"

:key="item.id"

></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

关于props的内容也将会在公众号CTO Plus后面的文章中做详细讲解，敬请关注。

总结

Vue3的循环语句提供了一种方便的方式来遍历和渲染数组和对象的内容。通过v-for指令，我们可以在模板中使用循环来生成动态的DOM元素。

在实际开发中，根据具体的需求和场景选择适合的循环方式非常重要。对于数组的遍历，可以使用v-for指令和特定变量；对于对象的遍历，可以使用v-for指令和键值对。

希望通过本文的介绍，你对Vue3的循环语句有了更深入的了解，并能够灵活运用它们来构建出令人满意的应用程序。

下一篇文章我将介绍《Vue3进阶：组件的介绍、使用详解和代码实战案例》

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

更多精彩，关注我公号，一起学习、成长

CTO Plus

一个有深度和广度的技术圈，技术总结、分享与交流，我们一起学习。涉及网络安全、C/C++、Python、Go、大前端、云原生、SRE、SDL、DevSecOps、数据库、中间件、FPGA、架构设计等大厂技术。每天早上8点10分准时发文。

306篇原创内容

公众号

注意：由于排版太费时间，所以还是多多注重技术干货的内容吧。

接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外，还将为各位前端读者（全栈开发者）分享下关于前端开发框架Vue3的内容，当然还会包括：H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。

然后对Python开发感兴趣的读者也可以关注公众号CTO Plus，关注【Python进阶系列】的内容，同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块，可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容，敬请关注，欢迎交流。

以下是【Vue3进阶系列】的部分内容