Vue.js實戰入門：如何對陣列和物件進行循環

上一節中(課程第三部分) 我們學習如何使用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; ?>

將需要循環輸出的<li&gt ; 標籤包裹在迴圈中。

但是在 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 陣列中的字串輸出到< ;li>

標籤中。

在瀏覽器內打開我們的

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 還是會很難看?）#######將整個###eb506be2904288e70ae7ccd016dcf170 标签. 因为 game 是一个对象，而这个对象里又有自己的 name、console 和rating 属性。在 4a249f0d628e2318394fd9b75b4636b1 里面，我们要输出 game 内的 game.name 和 game.console。正如你现在所看到的那样，v-for 并不像我们之前只输出 25edfb22a4f469ecb59f1190150159c6 标签，实际上你可以根据你的需要输出不同的 HTML 标签。

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

• 最后是 v-if。我们要在循环中输出一个 dc6dce4a544fdca2df29d5ac0ea9906b 标签，只有当前 game.rating 的值大于 5 时，才会输出一个dc6dce4a544fdca2df29d5ac0ea9906b标签。

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

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

如果你发现写了一大堆 dc6dce4a544fdca2df29d5ac0ea9906b 标签只是为了用 v-for 循环，那么可以使用 d477f9ce7bf77f53fbcf36bec1b69b7a 028402f0d1e2c7f0a5739e0164ec6833 这个特殊的 HTML 标签帮助你解决这个问题。

现在将带有 v-for 指令的 dc6dce4a544fdca2df29d5ac0ea9906b 标签改成 d477f9ce7bf77f53fbcf36bec1b69b7a 标签，然后打开你的开发者控制台，你会发现 4a249f0d628e2318394fd9b75b4636b1 和 45a2772a6b6107b401db3c9b82c049c2 标签没有被任何东西包裹。

d477f9ce7bf77f53fbcf36bec1b69b7a 很特别，因为 Vue 会把它当作一个只用来封装的标签，当我们执行的时候，它不会被渲染到 HTML 中，所以你可以安全地用它来封装一堆其他元素，而不影响你整体的 HTML 结构。

:key 属性

最后一件事：:key属性。我特意留到了最后来讲解。

当你用 v-for 循环时，Vue 不知道如何追踪每个元素，因为它不能将对象区别开来。这意味着 Vue 将重新渲染循环创建的整个部分。在我们的例子中，v-for 只是一个很小的部分，性能损失很小，但这些你应该牢记住。

现在，我们该如何使用它呢？

:key 接收字符串或数字来 “命名” 或 “追踪” 这个元素，所以我们需要给它一个唯一的标识符。对于我们的 games 来说，很简单，我们可以这样做：

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

我很确定，我们不会在这个列表中出现两次相同的 game 对象，所以这是相当安全的。如果你有来自数据库的数据，一个唯一的 id 在这里使用也很好。

如果你对 :key 的原理很好奇，你可以看看文档 Key的文档

既然你已经了解了这么多，我就再强调下文档的重要性。 Vue 的文档非常出色，文档团队在保持更新和清晰性方面做了很多努力并且通过代码示例把每个部分都解释的非常清楚。

最终代码

以防万一，这是最终的代码：

  




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

    ❤️

    
Wow, this game must be REALLY good