vue中vfor的用法

Vue.js 中 v-for 指令用於遍歷數組或對象，透過提供一個 item 表示當前項目和可選的 index 表示當前索引，以動態呈現項目列表。此指令可用於遍歷數組和對象，並使用 :key 屬性指定唯一鍵以最佳化效能。

Vue.js 中v-for 的用法

v-for 是Vue.js 中用於遍歷數組或物件的一個內建指令。它允許你動態地渲染清單中的項目，同時為每個項目提供一個唯一的鍵。

語法

<code><template v-for="(item, index) in collection">
  <!-- 渲染项目 -->
</template></code>

參數

<li> #item: 清單中的目前項目。 <li> index: 目前專案的索引（可選）。 <li> collection: 要遍歷的陣列或物件。

用法

#遍歷陣列

<code><ul>
  <li v-for="item in names">{{ item }}</li>
</ul></code>

這將為names 陣列中的每個項目建立一個<li> 元素，並顯示項目值。

遍歷物件

<code><ul>
  <li v-for="key in object">{{ key }}: {{ object[key] }}</li>
</ul></code>

這將為object 物件中的每個鍵建立一個<li> 元素，並顯示鍵和值。

使用index

v-for 指令還有一個可選的index 參數，它提供目前專案的索引：

<code><ul>
  <li v-for="(item, index) in names">{{ index + 1 }}: {{ item }}</li>
</ul></code>

唯一鍵

每個v-for 專案都必須具有一個唯一的鍵。這是因為 Vue.js 使用該鍵來追蹤專案的變化，並有效地更新 DOM。您可以使用 :key 屬性為專案指定鍵：

<code><ul>
  <li v-for="item in names" :key="item">{{ item }}</li>
</ul></code>

如果您不提供鍵，Vue.js 將使用目前專案作為預設鍵。但是，使用顯式的鍵可以提高效能。

以上是vue中vfor的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！