Vue.js怎么对数组和对象进行循环
本文小编为大家详细介绍“Vue.js怎么对数组和对象进行循环”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue.js怎么对数组和对象进行循环”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
创新互联是网站建设技术企业，为成都企业提供专业的网站设计、成都做网站，网站设计，网站制作，网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例，为您定制适合企业的网站。10多年品质，值得信赖！
v-for
v-for 是 Vue 的基本指令之一，一旦你学会如何使用它，你就可以在你的程序中添加更多功能。
简单的来说，v-for 就是一个 for 循环。如果你还不知道什么是 for 循环的话，for 循环其实是一段代码，代码内每一个元素都会被执行一次，而这些元素通常是一个 Array(数组) 或 Object(对象)。
今天，我们要从头开始，这样我们所做的一切都有一个明确的目的。下面是我们的 index.html 文件的基本结构，你可以将它复制粘贴到编辑器中。
Vue 101
让我们先创建一个简单的数组，这样我们可以使用循环输出数组里的内容。我们将在 data 对象中创建一个属性，叫做 games。当然，你也可以取一个自己喜欢的名字???。
data: {
games: [
'Super Mario 64',
'The Legend of Zelda Ocarina of Time',
'Secret of Mana',
'Super Metroid'
]
},
现在我们已经设置好了数组，让我们创建一个简单的
看起来很不错! 现在我们要告诉 Vue，我们要通过循环数组在
在其他语言中，你可能已经习惯了这样来循环输出
将需要循环输出的
但是在 Vue 中，我们可以将 v-for 指令声明在我们要循环的标签上。首先在你的
让我们来详细分析一下：
v-for 指令是直接加在 games 数组中的每一个 game 都创建一个
注意，games 是我们前面在 data 中添加的属性，所以我们要用这个变量名。
game 这个变量（单数）是由我们自己定义的，我们可以用 item、game、title 或者其他我们觉得合适的名称。但是一定要明白，这个 game 是你在循环里面要用的变量。
最后，在我们的 game 变量的内容，所以当我们循环运行的时候，将会依次把 games 数组中的字符串输出到
在浏览器内打开我们的 index.html 文件，你应该会看到 games 数组内的内容被输出到屏幕上。
提升点难度
到目前为止，还算不错吧？ v-for 实际上是一个非常简单的概念，但是这个例子太无聊了。让我们把事情变得更复杂有趣一点，在我们的数组中包含一些对象，并配合着 v-if 使用，怎么样？
首先，我们用一些更有趣的数据来更新我们的 games 属性。
data: {
games: [
{ name: 'Super Mario 64', console: 'Nintendo 64', rating: 4 },
{ name: 'The Legend of Zelda Ocarina of Time', console: 'Nintendo 64', rating: 5 },
{ name: 'Secret of Mana', console: 'Super Nintendo', rating: 4 },
{ name: 'Fallout 76', console: 'Multiple', rating: 1 },
{ name: 'Super Metroid', console: 'Super Nintendo', rating: 6 }
]
},
如果你现在运行我们的程序，它不会出错，但它只会以字符串的格式输出 games 里的对象，这不太美观。事实上，我们要彻底删掉我们的 标签来输出我们的信息。(别担心，用了 div 还是会很难看?）
将整个 替换成如下内容:
{{ game.name }} - {{ game.console }}
❤️
5">Wow, this game must be REALLY good
?. 看到上面一大堆是不是很害怕？不用担心，你只需要了解的是什么，让我们详细分析一下：
