---
# System prepended metadata

title: v-for(多筆資料渲染)

---

# v-for(多筆資料渲染)

https://www.cythilya.tw/2017/04/27/vue-list-rendering/

※ Vue 有一個獨特的機制，當他認為這個區塊的內容，沒有任何變化的時候，他就不會進行重新渲染；所以如果有相同父元素的子元素必須有獨特的 key 。 所以在使用 v-for 時，也將 key 一併加入比較保險。(如下行程式碼)

```
<li v-for="(item, key) in products" v-bind:key="item.name">
      {{ key }} - {{ item.name}} / {{ item.price }} 元
      <input type="text">
</li>
```

所以這時就利用 v-bind:key =" 獨特的值 "，來進行運作。