vue v-for — Write a list

write list with v-for api

基本範例

<ul>
  <li v-for="(singleData, index) in listData" :key="index">
    {{ singleData }}
  </li>
</ul>

v-for用法：v-for=”(item, index) in array”

item, index: 同Array.forEach中的((item, index) => { //… })一樣

:key(必須加在v-for component上) ：用來作為component標記，讓vue得知是list中的哪個更新了，來觸發更新渲染

custom component範例

搭配v-if做選擇性渲染

vue中不建議v-for和v-if在單一component中同時使用，如果需要filter某個值，可以使用Array.filter()，而要選擇性渲染組件，則是將v-if, :is 之類的放在該component的template去做選擇性渲染

react的list寫法

{list.map((item, index) => (
  <Component key={index} {...item} />
))}

官方文檔：

v-for: https://vuejs.org/v2/api/#v-for