9 渲染列表第 1 部分（遍歷數組） · JavaBeginnersTutorial 中文系列教程

# 9 渲染列表第 1 部分（遍歷數組） > 原文： [https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/) 我們日復一日地處理清單。在我們的應用中，我們經常遇到這樣的情況，即我們必須將數組顯示為列表，其項會動態變化。因此，在我們的 HTML 中對數組項進行硬編碼并不是真正的選擇。重要的是，我們知道如何使用 Vue 處理這些動態變化的數組，這并不奇怪，為此，我們還有另一個指令！對，是`v-for`！與往常一樣，我們將深入研究大量示例，以便于清楚理解。 ## 遍歷數組我們面臨的最常見和最簡單的方案是遍歷數組的各項并將它們呈現為列表。以下是四種不同語言的問候語，我們希望將其顯示為網頁的無序列表。 ```js data: { greetings: ["hi", "bonjour", "hola", "ciao"] } ``` 在我們的`index.html`文件中，讓我們將`v-for`指令添加到`<li>`元素中，以動態地呈現`greetings`數組的內容，如下所示： ```js <li v-for="greeting in greetings">{{ greeting }}</li> ``` 好吧，不要驚慌！我將逐字剖析此信息。我們為`v-for`指令使用的*特殊語法*是“`greeting in greetings`”。 * 首先， `greeting` – 建議在我們的情況下使用單數名詞，`greeting`，作為數組元素的**別名**反復進行。這可以是您選擇的任何名稱，然后可以在我們的代碼中使用該名稱來尋址每個數組項。 * 其次，作為語法一部分的 – **定界符**`in`。如果您具有 JavaScript 背景，那么所有這些看起來都應該很熟悉，因為在這里我們將`for in`和`for of`用于迭代目的。即使使用 Vue，我們也可以使用`of`作為分隔符而不是`in` ```js <li v-for="greeting of greetings">{{ greeting }}</li> ``` * 最后， `greetings` – 必須與 Vue 實例的`data`對象中的**數組名稱**完全相同。在這里，為簡單起見，我們在簡單插值中使用變量`greeting`。但它可以像其他任何屬性一樣使用，例如將其作為值傳遞給函數或將其綁定到鏈接的引用等。輸出如下， ![v-for iterating over array](https://img.kancloud.cn/9c/5e/9c5ea8c7921c71e522a77e853d89b1b8_688x448.png) 使用小胡子語法的另一種方法是使用`v-text`指令。它將`greeting`設置為文本內容。 ```html <ul> <li v-for="greeting in greetings" v-text=greeting></li> </ul> ``` 將呈現相同的結果。 ## Vue 是反應式的！讓我們沿著存儲通道走一下。我們了解到 Vue 的美麗在于其[反應式](https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/)。 **快速回顧**：使狀態和視圖保持同步。換句話說，Vue 不僅在引用的 DOM 中將**呈現為**數據，而且無論何時在數據對象中更改其值，**都會更新**。讓我們再來看一次這種情況。使用快捷方式`F12`打開 *Chrome DevTools* ，然后點擊“**Vue**”。僅當您已遵循我們的教程系列并安裝了 [**Vue Devtools** Chrome 擴展](https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/) 后，此面板才會出現。由于我們沒有使用任何全局變量來引用`index.js`文件中的 Vue 實例，因此默認情況下會將其保存到`$vm0`。如下圖所示，單擊`<Root>`即可看到。因此，讓我們使用`$vm0`從開發者工具控制臺訪問 Vue 模型。 ![reactivity in vue](https://img.kancloud.cn/e5/c8/e5c82ba123a09d4d8e1dad5e6c4b858c_372x514.png) 讓我們轉到控制臺，使用`push`方法向`greetings`數組添加一個問候，然后查看視圖是否進行了動態更新（*神奇地*！）。 ```jsscript $vm0.greetings.push("namaste") ``` ![v-for reactivity](https://img.kancloud.cn/58/7f/587fddbb29bff5ae84e14b6e466392a2_509x411.png) 這不是魔術嗎？ ## 訪問當前數組項的索引開發者的生活沒有暫停按鈕！我們期望完成意外的事情，例如訪問數組項的索引及其內容。我們知道如何使用 Vue 渲染數組元素，但是否也可以獲得其索引？好吧，答案是肯定的！語法與我們之前看到的非常相似， ```html <div v-for="(greeting, index) in greetings">{{ index }}. {{ greeting}}</div> ``` 我們必須引入一個括號并指定兩個用逗號分隔的參數，可以選擇它們的名稱。 **第一個**參數是指數組元素 – 在我們的示例中是`greeting`。 **第二個**參數是可選的，它引用當前正在循環的項目的索引 – 在我們的示例中為`index`。此**順序**是最重要的注意事項。無論您使用什么名稱，第一個始終是數組元素，第二個始終是`v-for`語法中的索引。然后可以根據需要將其與代碼中的這些名稱一起使用。 ![v-for with index](https://img.kancloud.cn/d2/2a/d22a71fa962d4d651b0a30a455169694_786x423.png) 讓我們看一下最終代碼。 ### `Index.html` ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Greetings</h2>  <ul> <li v-for="greeting in greetings" v-text=greeting></li> </ul>  <h2>Greetings with Index</h2> <div v-for="(greeting, index) in greetings"> {{ index }}. {{ greeting}} </div> </div>  <script src="index.js"></script> </body> </html> ``` ### `Index.js` ```jsscript var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"] } }); ``` [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中也提供了上面討論的所有代碼。隨意分叉倉庫并進行一些實驗。在下一篇文章中，我們將研究如何使用`v-for`遍歷對象。在此之前，請繼續練習！