登录 注册

php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

Vue.js实战入门：如何对数组和对象进行循环

Vue.js实战入门：如何对数组和对象进行循环

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

v-for

v-for 是 Vue 的基本指令之一，一旦你学会如何使用它，你就可以在你的程序中添加更多功能。

简单的来说，v-for 就是一个 for 循环。如果你还不知道什么是 for 循环的话，for 循环其实是一段代码，代码内每一个元素都会被执行一次，而这些元素通常是一个 Array(数组) 或 Object(对象)。

今天，我们要从头开始，这样我们所做的一切都有一个明确的目的。下面是我们的 index.html 文件的基本结构，你可以将它复制粘贴到编辑器中。

<html>

<head>
  <title>Vue 101</title>
</head>

<body>
  <div id="app">

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: &#39;#app&#39;,
      data: {

      },
      methods: {

      }
    });
  </script>
</body>

</html>

让我们先创建一个简单的数组，这样我们可以使用循环输出数组里的内容。我们将在 data 对象中创建一个属性，叫做 games。当然，你也可以取一个自己喜欢的名字???。

data: {
  games: [
    &#39;Super Mario 64&#39;,
    &#39;The Legend of Zelda Ocarina of Time&#39;,
    &#39;Secret of Mana&#39;,
    &#39;Super Metroid&#39;
  ]
},

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

    标签来显示它。

    <div id="app">
  <ul>
    <li>Game title here</li>
  </ul>
</div>

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

      中输出尽可能多的
    • 标签。

      在其他语言中，你可能已经习惯了这样来循环输出

    • 标签：

      <?php foreach ($game in $games): ?>
  <li><?php echo $game; ?></li>
<?php endforeach; ?>

      将需要循环输出的

    • 标签包裹在循环中。

      但是在 Vue 中，我们可以将 v-for 指令声明在我们要循环的标签上。首先在你的

    • 标签中做下面这些修改，之后我们再来一步步分析。

      <ul>
  <li v-for="game in games">{{ game }}</li>
</ul>

      让我们来详细分析一下：

      • v-for 指令是直接加在

      • 标签中，而不是我们前面看到的
          标签。这样写的原因是： “给我们 games 数组中的每一个 game 都创建一个
        • 标签。

        • 注意，games 是我们前面在 data 中添加的属性，所以我们要用这个变量名。

        • game 这个变量（单数）是由我们自己定义的，我们可以用 item、game、title 或者其他我们觉得合适的名称。但是一定要明白，这个 game 是你在循环里面要用的变量。

        • 最后，在我们的

        • 标签里面，我们要输出 game 变量的内容，所以当我们循环运行的时候，将会依次把 games 数组中的字符串输出到
        • 标签中。

        在浏览器内打开我们的 index.html 文件，你应该会看到 games 数组内的内容被输出到屏幕上。

        提升点难度

        到目前为止，还算不错吧？ v-for 实际上是一个非常简单的概念，但是这个例子太无聊了。让我们把事情变得更复杂有趣一点，在我们的数组中包含一些对象，并配合着 v-if 使用，怎么样？

        首先，我们用一些更有趣的数据来更新我们的 games 属性。

        data: {
  games: [
    { name: &#39;Super Mario 64&#39;, console: &#39;Nintendo 64&#39;, rating: 4 },
    { name: &#39;The Legend of Zelda Ocarina of Time&#39;, console: &#39;Nintendo 64&#39;, rating: 5 },
    { name: &#39;Secret of Mana&#39;, console: &#39;Super Nintendo&#39;, rating: 4 },
    { name: &#39;Fallout 76&#39;, console: &#39;Multiple&#39;, rating: 1 },
    { name: &#39;Super Metroid&#39;, console: &#39;Super Nintendo&#39;, rating: 6 }
  ]
},

        如果你现在运行我们的程序，它不会出错，但它只会以字符串的格式输出 games 里的对象，这不太美观。事实上，我们要彻底删掉我们的

          标签，用
          标签来输出我们的信息。(别担心，用了 div 还是会很难看?）

          将整个

          替换成如下内容:

          <div id="app">
  <div v-for="game in games">
    <h1>{{ game.name }} - <small>{{ game.console }}</small></h1>

    <span v-for="star in game.rating">❤️</span>

    <div v-if="game.rating > 5">Wow, this game must be <b>REALLY</b> good</div>
  </div>
</div>

          ?. 看到上面一大堆是不是很害怕？不用担心，你只需要了解的是什么，让我们详细分析一下：

          • div v-for="game in games" 还是老样子，我们要循环 games 数组，并将 games 数组内的每个对象存储在 game 变量中。

          • 看看

            标签. 因为 game 是一个对象，而这个对象里又有自己的 name、console 和rating 属性。在

            里面，我们要输出 game 内的 game.name 和 game.console。正如你现在所看到的那样，v-for 并不像我们之前只输出
          • 标签，实际上你可以根据你的需要输出不同的 HTML 标签。

          • 嵌套的 v-for。在 span 标签里面，我们有一个嵌套的 v-for 循环(这完全是可以的)，只是有点不同，在这里我们没有循环数组或对象。而是循环了一个数值（在本例中是 game.rating，循环将根据 game.rating 的值开始计数，然后输出对应数量的❤️。很简单吧？)

          • 最后是 v-if。我们要在循环中输出一个

            标签，只有当前 game.rating 的值大于 5 时，才会输出一个
            标签。

          来吧，在浏览器中继续运行我们的 index.html 文件。

          每次循环时可不可以不使用 DIV ？

          如果你发现写了一大堆

          标签只是为了用 v-for 循环，那么可以使用