轉譯清單

已完成

使用資料通常牽涉到陣列或其他類型的集合。 您通常會使用某種形式的迴圈,逐一查看集合中的所有項目。 Vue.js 支援使用名為 v-for 的指示詞進行迴圈。

v-for 指示詞簡介

若要顯示清單中的所有項目,您可以使用指示詞 v-forv-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 的索引鍵,其會允許它在發生變更時更新該個別項目。