Vue.js怎么對數(shù)組和對象進行循環(huán)

本文小編為大家詳細介紹“Vue.js怎么對數(shù)組和對象進行循環(huán)”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“Vue.js怎么對數(shù)組和對象進行循環(huán)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都做網(wǎng)站，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10多年品質(zhì)，值得信賴！

v-for

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

簡單的來說，v-for 就是一個 for 循環(huán)。如果你還不知道什么是 for 循環(huán)的話，for 循環(huán)其實是一段代碼，代碼內(nèi)每一個元素都會被執(zhí)行一次，而這些元素通常是一個 Array(數(shù)組) 或 Object(對象)。

今天，我們要從頭開始，這樣我們所做的一切都有一個明確的目的。下面是我們的 index.html 文件的基本結(jié)構(gòu)，你可以將它復(fù)制粘貼到編輯器中。

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

讓我們先創(chuàng)建一個簡單的數(shù)組，這樣我們可以使用循環(huán)輸出數(shù)組里的內(nèi)容。我們將在 data 對象中創(chuàng)建一個屬性，叫做 games。當(dāng)然，你也可以取一個自己喜歡的名字???。

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

現(xiàn)在我們已經(jīng)設(shè)置好了數(shù)組，讓我們創(chuàng)建一個簡單的 <ul> 標(biāo)簽來顯示它。

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

看起來很不錯! 現(xiàn)在我們要告訴 Vue，我們要通過循環(huán)數(shù)組在 <ul> 中輸出盡可能多的 <li> 標(biāo)簽。

在其他語言中，你可能已經(jīng)習(xí)慣了這樣來循環(huán)輸出 <li> 標(biāo)簽：

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

將需要循環(huán)輸出的 <li> 標(biāo)簽包裹在循環(huán)中。

但是在 Vue 中，我們可以將 v-for 指令聲明在我們要循環(huán)的標(biāo)簽上。首先在你的 <li> 標(biāo)簽中做下面這些修改，之后我們再來一步步分析。

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

讓我們來詳細分析一下：

v-for 指令是直接加在 <li> 標(biāo)簽中，而不是我們前面看到的 <ul> 標(biāo)簽。這樣寫的原因是： “給我們 games 數(shù)組中的每一個 game 都創(chuàng)建一個 <li> 標(biāo)簽。
注意，games 是我們前面在 data 中添加的屬性，所以我們要用這個變量名。
game 這個變量（單數(shù)）是由我們自己定義的，我們可以用 item、game、title 或者其他我們覺得合適的名稱。但是一定要明白，這個 game 是你在循環(huán)里面要用的變量。
最后，在我們的 <li> 標(biāo)簽里面，我們要輸出 game 變量的內(nèi)容，所以當(dāng)我們循環(huán)運行的時候，將會依次把 games 數(shù)組中的字符串輸出到 <li> 標(biāo)簽中。

在瀏覽器內(nèi)打開我們的 index.html 文件，你應(yīng)該會看到 games 數(shù)組內(nèi)的內(nèi)容被輸出到屏幕上。

提升點難度

到目前為止，還算不錯吧？ v-for 實際上是一個非常簡單的概念，但是這個例子太無聊了。讓我們把事情變得更復(fù)雜有趣一點，在我們的數(shù)組中包含一些對象，并配合著 v-if 使用，怎么樣？

首先，我們用一些更有趣的數(shù)據(jù)來更新我們的 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 }
  ]
},

如果你現(xiàn)在運行我們的程序，它不會出錯，但它只會以字符串的格式輸出 games 里的對象，這不太美觀。事實上，我們要徹底刪掉我們的 <ul> 標(biāo)簽，用 <div> 標(biāo)簽來輸出我們的信息。(別擔(dān)心，用了 div 還是會很難看?）

將整個 <div id="app"> 替換成如下內(nèi)容:

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

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

?. 看到上面一大堆是不是很害怕？不用擔(dān)心，你只需要了解的是什么，讓我們詳細分析一下：

div v-for="game in games" 還是老樣子，我們要循環(huán) games 數(shù)組，并將 games 數(shù)組內(nèi)的每個對象存儲在 game 變量中。
看看 <h2> 標(biāo)簽. 因為 game 是一個對象，而這個對象里又有自己的 name、console 和rating 屬性。在 <h2> 里面，我們要輸出 game 內(nèi)的 game.name 和 game.console。正如你現(xiàn)在所看到的那樣，v-for 并不像我們之前只輸出 <li> 標(biāo)簽，實際上你可以根據(jù)你的需要輸出不同的 HTML 標(biāo)簽。
嵌套的 v-for。在 span 標(biāo)簽里面，我們有一個嵌套的 v-for 循環(huán)(這完全是可以的)，只是有點不同，在這里我們沒有循環(huán)數(shù)組或?qū)ο?。而是循環(huán)了一個數(shù)值（在本例中是 game.rating，循環(huán)將根據(jù) game.rating 的值開始計數(shù)，然后輸出對應(yīng)數(shù)量的??。很簡單吧？)
最后是 v-if。我們要在循環(huán)中輸出一個 <div> 標(biāo)簽，只有當(dāng)前 game.rating 的值大于 5 時，才會輸出一個<div>標(biāo)簽。

來吧，在瀏覽器中繼續(xù)運行我們的 index.html 文件。

每次循環(huán)時可不可以不使用 DIV ？

如果你發(fā)現(xiàn)寫了一大堆 <div> 標(biāo)簽只是為了用 v-for 循環(huán)，那么可以使用 <template> </ template> 這個特殊的 HTML 標(biāo)簽幫助你解決這個問題。

現(xiàn)在將帶有 v-for 指令的 <div> 標(biāo)簽改成 <template> 標(biāo)簽，然后打開你的開發(fā)者控制臺，你會發(fā)現(xiàn) <h2> 和 <span> 標(biāo)簽沒有被任何東西包裹。

Vue.js怎么對數(shù)組和對象進行循環(huán)

<template> 很特別，因為 Vue 會把它當(dāng)作一個只用來封裝的標(biāo)簽，當(dāng)我們執(zhí)行的時候，它不會被渲染到 HTML 中，所以你可以安全地用它來封裝一堆其他元素，而不影響你整體的 HTML 結(jié)構(gòu)。

:key 屬性

最后一件事：:key屬性。我特意留到了最后來講解。

當(dāng)你用 v-for 循環(huán)時，Vue 不知道如何追蹤每個元素，因為它不能將對象區(qū)別開來。這意味著 Vue 將重新渲染循環(huán)創(chuàng)建的整個部分。在我們的例子中，v-for 只是一個很小的部分，性能損失很小，但這些你應(yīng)該牢記住。

現(xiàn)在，我們該如何使用它呢？

:key 接收字符串或數(shù)字來 “命名” 或 “追蹤” 這個元素，所以我們需要給它一個唯一的標(biāo)識符。對于我們的 games 來說，很簡單，我們可以這樣做：

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

我很確定，我們不會在這個列表中出現(xiàn)兩次相同的 game 對象，所以這是相當(dāng)安全的。如果你有來自數(shù)據(jù)庫的數(shù)據(jù)，一個唯一的 id 在這里使用也很好。

最終代碼

以防萬一，這是最終的代碼：

<html>

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

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

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

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

  <script>
    const app = new Vue({
      el: '#app',
        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 }
          ]
        }
    });
  </script>
</body>

</html>

讀到這里，這篇“Vue.js怎么對數(shù)組和對象進行循環(huán)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：Vue.js怎么對數(shù)組和對象進行循環(huán)
地址分享：http://bm7419.com/article46/iipjhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計公司、品牌網(wǎng)站制作、網(wǎng)站改版、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

Vue.js怎么對數(shù)組和對象進行循環(huán)

v-for

提升點難度

每次循環(huán)時可不可以不使用 DIV ？

:key 屬性

最終代碼

每次循環(huán)時可不可以不使用 DIV ？