本文小編為大家詳細(xì)介紹“Vue.js怎么對數(shù)組和對象進(jìn)行循環(huán)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue.js怎么對數(shù)組和對象進(jìn)行循環(huán)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10多年品質(zhì)，值得信賴！
v-for 是 Vue 的基本指令之一，一旦你學(xué)會如何使用它，你就可以在你的程序中添加更多功能。
簡單的來說，v-for 就是一個(gè) for 循環(huán)。如果你還不知道什么是 for 循環(huán)的話，for 循環(huán)其實(shí)是一段代碼，代碼內(nèi)每一個(gè)元素都會被執(zhí)行一次，而這些元素通常是一個(gè) Array(數(shù)組) 或 Object(對象)。
今天，我們要從頭開始，這樣我們所做的一切都有一個(gè)明確的目的。下面是我們的 index.html 文件的基本結(jié)構(gòu)，你可以將它復(fù)制粘貼到編輯器中。
讓我們先創(chuàng)建一個(gè)簡單的數(shù)組，這樣我們可以使用循環(huán)輸出數(shù)組里的內(nèi)容。我們將在 data 對象中創(chuàng)建一個(gè)屬性，叫做 games。當(dāng)然，你也可以取一個(gè)自己喜歡的名字???。
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)建一個(gè)簡單的
看起來很不錯(cuò)! 現(xiàn)在我們要告訴 Vue，我們要通過循環(huán)數(shù)組在 標(biāo)簽。
在其他語言中，你可能已經(jīng)習(xí)慣了這樣來循環(huán)輸出 標(biāo)簽：
將需要循環(huán)輸出的 標(biāo)簽包裹在循環(huán)中。
但是在 Vue 中，我們可以將 v-for 指令聲明在我們要循環(huán)的標(biāo)簽上。首先在你的 標(biāo)簽中做下面這些修改，之后我們再來一步步分析。
讓我們來詳細(xì)分析一下：
v-for 指令是直接加在 標(biāo)簽中，而不是我們前面看到的 games 數(shù)組中的每一個(gè) game 都創(chuàng)建一個(gè) 標(biāo)簽。
注意，games 是我們前面在 data 中添加的屬性，所以我們要用這個(gè)變量名。
game 這個(gè)變量（單數(shù)）是由我們自己定義的，我們可以用 item、game、title 或者其他我們覺得合適的名稱。但是一定要明白，這個(gè) game 是你在循環(huán)里面要用的變量。
最后，在我們的 標(biāo)簽里面，我們要輸出 game 變量的內(nèi)容，所以當(dāng)我們循環(huán)運(yùn)行的時(shí)候，將會依次把 games 數(shù)組中的字符串輸出到 標(biāo)簽中。
在瀏覽器內(nèi)打開我們的 index.html 文件，你應(yīng)該會看到 games 數(shù)組內(nèi)的內(nèi)容被輸出到屏幕上。
到目前為止，還算不錯(cuò)吧？ v-for 實(shí)際上是一個(gè)非常簡單的概念，但是這個(gè)例子太無聊了。讓我們把事情變得更復(fù)雜有趣一點(diǎn)，在我們的數(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)在運(yùn)行我們的程序，它不會出錯(cuò)，但它只會以字符串的格式輸出 將整個(gè) games 里的對象，這不太美觀。事實(shí)上，我們要徹底刪掉我們的 {{ game.name }} - {{ game.console }}
?. 看到上面一大堆是不是很害怕？不用擔(dān)心，你只需要了解的是什么，讓我們詳細(xì)分析一下：
div v-for="game in games" 還是老樣子，我們要循環(huán) games 數(shù)組，并將 games 數(shù)組內(nèi)的每個(gè)對象存儲在 game 變量中。
看看 標(biāo)簽. 因?yàn)?game 是一個(gè)對象，而這個(gè)對象里又有自己的 name、console 和rating 屬性。在 里面，我們要輸出 game 內(nèi)的 game.name 和 game.console。正如你現(xiàn)在所看到的那樣，v-for 并不像我們之前只輸出 標(biāo)簽，實(shí)際上你可以根據(jù)你的需要輸出不同的 HTML 標(biāo)簽。
嵌套的 v-for。在 span 標(biāo)簽里面，我們有一個(gè)嵌套的 v-for 循環(huán)(這完全是可以的)，只是有點(diǎn)不同，在這里我們沒有循環(huán)數(shù)組或?qū)ο?。而是循環(huán)了一個(gè)數(shù)值（在本例中是 game.rating，循環(huán)將根據(jù) game.rating 的值開始計(jì)數(shù)，然后輸出對應(yīng)數(shù)量的??。很簡單吧？)
最后是 來吧，在瀏覽器中繼續(xù)運(yùn)行我們的 如果你發(fā)現(xiàn)寫了一大堆 現(xiàn)在將帶有 最后一件事： 當(dāng)你用 現(xiàn)在，我們該如何使用它呢？ 我很確定，我們不會在這個(gè)列表中出現(xiàn)兩次相同的 以防萬一，這是最終的代碼： 讀到這里，這篇“Vue.js怎么對數(shù)組和對象進(jìn)行循環(huán)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。v-if。我們要在循環(huán)中輸出一個(gè) game.rating 的值大于 5 時(shí)，才會輸出一個(gè)index.html 文件。每次循環(huán)時(shí)可不可以不使用 DIV ？
v-for 循環(huán)，那么可以使用 這個(gè)特殊的 HTML 標(biāo)簽幫助你解決這個(gè)問題。v-for 指令的 標(biāo)簽，然后打開你的開發(fā)者控制臺，你會發(fā)現(xiàn) 和 標(biāo)簽沒有被任何東西包裹。
很特別，因?yàn)?Vue 會把它當(dāng)作一個(gè)只用來封裝的標(biāo)簽，當(dāng)我們執(zhí)行的時(shí)候，它不會被渲染到 HTML 中，所以你可以安全地用它來封裝一堆其他元素，而不影響你整體的 HTML 結(jié)構(gòu)。:key 屬性
:key屬性。我特意留到了最后來講解。v-for 循環(huán)時(shí)，Vue 不知道如何追蹤每個(gè)元素，因?yàn)樗荒軐ο髤^(qū)別開來。這意味著 Vue 將重新渲染循環(huán)創(chuàng)建的整個(gè)部分。在我們的例子中，v-for 只是一個(gè)很小的部分，性能損失很小，但這些你應(yīng)該牢記住。:key 接收字符串或數(shù)字來 “命名” 或 “追蹤” 這個(gè)元素，所以我們需要給它一個(gè)唯一的標(biāo)識符。對于我們的 games 來說，很簡單，我們可以這樣做：game 對象，所以這是相當(dāng)安全的。如果你有來自數(shù)據(jù)庫的數(shù)據(jù)，一個(gè)唯一的 id 在這里使用也很好。最終代碼
{{ game.name }} - {{ game.console }}
網(wǎng)頁名稱：Vue.js怎么對數(shù)組和對象進(jìn)行循環(huán)
本文路徑：http://weahome.cn/article/iipjhg.html
重慶分公司
重慶分公司
