轉譯清單
使用資料通常牽涉到陣列或其他類型的集合。 您通常會使用某種形式的迴圈,逐一查看集合中的所有項目。 Vue.js 支援使用名為 v-for
的指示詞進行迴圈。
v-for 指示詞簡介
若要顯示清單中的所有項目,您可以使用指示詞 v-for
。 v-for
的行為與 JavaScript 中的 for...of
迴圈很類似。 它會逐一查看集合,並透過您所宣告的變數來提供每個項目的存取權。
v-for
的語法如下所示:
v-for="itemName in collectionName"
collectionName
是您資料物件中的陣列名稱。 針對每個逐一查看,itemName
會承擔您目前項目的身分識別。 若要在範本中使用 v-for
,您可以在元素宣告中加入指示詞。 這麼做會重複 HTML 元素多次,因為陣列中有項目。
注意
如果您要建立未排序的清單 (ul
),則您不會將 v-for
新增至 ul
元素。 您將會它新增至 li
元素,因為 li
元素是將要重複的項目。
在應用程式中使用 v-for
若要在應用程式中使用 v-for
指示詞,您需要執行兩個作業:
- 透過您的資料物件公開陣列。 若要使用
v-for
指示詞,請確保您的data()
方法會傳回類型陣列的資料。 - 將
v-for
指示詞新增至元素。 將v-for
指示詞新增至 HTML 元素。 若要顯示來自陣列的資料,請使用雙括弧 ({{ }}) 語法。
假設您想要公開您的資料物件中的名稱陣列:
Vue.createApp({
data() {
return {
names: ['Susan', 'Peter', 'Bill' ]
}
}
}).mount('#demo');
如果您想要顯示項目,可以使用下列程式碼:
<ul id="demo">
<li v-for="name in names">{{ name }}</li>
</ul>
轉譯程式碼後,會顯示陣列中的所有名稱:
- Susan
- Peter
- Bill
索引鍵和狀態
如果資料經過修改,Vue.js 必須能夠重新整理顯示的適當部分。 使用清單時,最好是更新個別的項目,而非整個清單。 若要允許 Vue.js 尋找個別項目,請為每個顯示的項目提供一個索引鍵。 您不需要將索引鍵新增至資料物件;您可以使用陣列的索引來產生它。
您可以藉由更新 v-for
宣告來取得索引,如下列程式碼所示:
<ul id="demo">
<li v-for="(name, index) in names" :key="index">{{ name }}</li>
</ul>
index
會針對陣列中的每個項目遞增。 :key
指示詞會儲存 Vue.js 的索引鍵,其會允許它在發生變更時更新該個別項目。