vue.js实战入门：如何对数组和对象进行循环-ag真人官方网

来源：php中文网 | 2022-11-15 15:53:08 |

上一节中 (课程第三部分) 我们学习了如何使用 v-if和 v-show进行条件渲染。本节我们将学习如何对数组和对象进行循环，除此之外，我们还将应用之前所学的一些概念。

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"  ]},

现在我们已经设置好了数组，让我们创建一个简单的

      game title here

看起来很不错! 现在我们要告诉 vue，我们要通过循环数组在

标签。
在其他语言中，你可能已经习惯了这样来循环输出
标签：
将需要循环输出的
标签包裹在循环中。
但是在 vue 中，我们可以将 v-for指令声明在我们要循环的标签上。首先在你的
标签中做下面这些修改，之后我们再来一步步分析。 {{ game }}
让我们来详细分析一下：
v-for指令是直接加在
标签中，而不是我们前面看到的
- 标签。
  注意，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里的对象，这不太美观。事实上，我们要彻底删掉我们的

vue.js实战入门：如何对数组和对象进行循环-ag真人官方网

v-for

提升点难度