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

v-for

##game 這個變數（單數）是由我們自己定義的，我們可以用item

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

:key 属性

最终代码

小测验

首頁

web前端

Vue.js

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

青灯夜游

Nov 15, 2022 pm 03:32 PM

vue

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: '#app',
      data: {

      },
      methods: {

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

</html>

登入後複製

讓我們先建立一個簡單的數組，這樣我們就可以使用循環輸出數組裡的內容。我們將在 data 物件中建立一個屬性，叫做 games。當然，你也可以取一個自己喜歡的名字???。

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

登入後複製

現在我們已經設定好了數組，讓我們建立一個簡單的 <ul> 標籤來顯示它。

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

登入後複製

看起來很不錯! 現在我們要告訴Vue，我們要透過循環數組在<ul> 中輸出盡可能多的<li>標籤。

在其他語言中，你可能已經習慣了這樣來循環輸出<li> 標籤：

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

登入後複製

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

但是在 Vue 中，我們可以將 v-for 指令宣告在我們要循環的標籤上。首先在你的 <li> 標籤中做下面這些修改，之後我們再來一步一步分析。

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

登入後複製

讓我們來詳細分析一下：

v-for 指令是直接加在<li>#標籤中，而不是我們前面看到的<ul> 標籤。這樣寫的原因是：「給我們games 數組中的每一個game 都創建一個<li> 標籤。

games

是我們前面在data 中加入的屬性，所以我們要用這個變數名稱。

##game 這個變數（單數）是由我們自己定義的，我們可以用item

、

game、title 或其他我們覺得合適的名稱。但是一定要明白，這個game

是你在循環裡面要用的變數。

最後，在我們的

<li> 標籤裡面，我們要輸出game 變數的內容，所以當我們循環運行的時候，將會依序把games 陣列中的字串輸出到< ;li>

標籤中。

在瀏覽器內打開我們的

index.html

文件，你應該會看到

提升點難度 到目前為止，還不錯吧？v-for實際上是一個非常簡單的概念，但是這個例子太無聊了。讓我們把事情變得更複雜有趣一點，在我們的數組中包含一些對象，並配合著v-if

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

登入後複製

<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>

登入後複製

看看 <h1> 标签. 因为 game 是一个对象，而这个对象里又有自己的 name、console 和rating 属性。在 <h1> 里面，我们要输出 game 内的 game.name 和 game.console。正如你现在所看到的那样，v-for 并不像我们之前只输出 <li> 标签，实际上你可以根据你的需要输出不同的 HTML 标签。

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

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

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

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

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

现在将带有 v-for 指令的 <div> 标签改成 <template> 标签，然后打开你的开发者控制台，你会发现 <h1> 和 <span> 标签没有被任何东西包裹。

<template> 很特别，因为 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 的文档非常出色，文档团队在保持更新和清晰性方面做了很多努力并且通过代码示例把每个部分都解释的非常清楚。

最终代码

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




  Vue 101




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

    ❤️

    Wow, this game must be REALLY good

登入後複製

小测验

请在 <span> 标签中添加一个 @click 事件，使它每次点击就会增加一个❤️。

提示: 你需要将正在循环的 game 对象传递给点击方法。

原文地址：https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-4-324l

译文地址：https://www.php.cn/link/5a13fe4ac11f3e35f4b9f0a99cf504c0

（学习视频分享：web前端开发、编程基础视频）

以上是Vue.js實戰入門：如何對陣列和物件進行循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7807

Java教學

1645

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。