Vue.js에 대한 실용적인 소개: 배열과 객체를 반복하는 방법

이전 섹션(과정 3부)에서는 조건부 렌더링에 v-if 및 v-show를 사용하는 방법을 배웠습니다. 이 섹션에서는 배열과 객체를 반복하는 방법을 배우고, 또한 이전에 배운 개념 중 일부를 적용해 보겠습니다. v-if 和 v-show 进行条件渲染。本节我们将学习如何对数组和对象进行循环，除此之外，我们还将应用之前所学的一些概念。

v-for

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

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

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

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e
  b2386ffb911b14667cb8f0f91ea547a7Vue 1016e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
  ab509c080ec9f7ec77efedb1cdcd4bed

  16b28748ea4df4d9c2150843fecfba68

  89fdf195e736e7d681e8695545042be92cacc6d41bbb37262a98f745aa00fbf0

  3f1c4e4b6b16bbbd69b2ee476dc4f83a
    const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {

      }
    });
  2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

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

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

现在我们已经设置好了数组，让我们创建一个简单的 ff6d136ddc5fdfeffaf53ff6ee95f185 标签来显示它。

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

看起来很不错! 现在我们要告诉 Vue，我们要通过循环数组在 ff6d136ddc5fdfeffaf53ff6ee95f185 中输出尽可能多的 25edfb22a4f469ecb59f1190150159c6 标签。

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

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

将需要循环输出的 25edfb22a4f469ecb59f1190150159c6 标签包裹在循环中。

但是在 Vue 中，我们可以将 v-for 指令声明在我们要循环的标签上。首先在你的 25edfb22a4f469ecb59f1190150159c6 标签中做下面这些修改，之后我们再来一步步分析。

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

让我们来详细分析一下：

• v-for 指令是直接加在 25edfb22a4f469ecb59f1190150159c6 标签中，而不是我们前面看到的 ff6d136ddc5fdfeffaf53ff6ee95f185 标签。这样写的原因是： “给我们 games 数组中的每一个 game 都创建一个 25edfb22a4f469ecb59f1190150159c6 标签。

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

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

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

在浏览器内打开我们的 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 里的对象，这不太美观。事实上，我们要彻底删掉我们的 ff6d136ddc5fdfeffaf53ff6ee95f185 标签，用 dc6dce4a544fdca2df29d5ac0ea9906b 标签来输出我们的信息。(别担心，用了 div 还是会很难看?）

将整个 0668f9b9672fb8bee085b6d77157e8a9 替换成如下内容:

<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

  v-for

  v-for는 Vue의 기본 지침 중 하나입니다. 사용법을 익히면 사용할 수 있습니다. 프로그램에 더 많은 기능을 추가하세요. 🎜🎜간단히 말하면 v-for는 for 루프입니다. 여전히 for 루프가 무엇인지 모르는 경우 for 루프는 실제로 코드 조각입니다. 코드의 각 요소는 한 번 실행되며 이러한 요소는 일반적으로 Array(array) 또는 Object(object)입니다. 🎜🎜오늘 우리는 우리가 하는 모든 일이 명확한 목적을 갖도록 처음부터 시작합니다. 다음은 편집기에 복사하여 붙여넣을 수 있는 index.html 파일의 기본 구조입니다. 🎜

  <div v-for="game in games" :key="game.name">

  🎜루프를 사용하여 배열의 내용을 출력할 수 있도록 먼저 간단한 배열을 만들어 보겠습니다. games라는 data 개체에 속성을 생성하겠습니다. 물론 원하는 이름을 선택할 수도 있습니다???. 🎜

  
  
  
    
  
  
  
  
    <div v-for="game in games" :key="game.name">
      
  {{ game.name }} - {{ game.console }}
  
      ❤️
  
      
  Wow, this game must be REALLY good