如果要把一個陣列或物件渲染到畫面,在原生的 JS 我們可以用迴圈或 forEach 以遍歷的方式將陣列的資料顯示,如果用 ES6 就可用 for…of 循環語句。
在 Vue 裡要遍歷陣列的方法並不難,只是遍歷陣列和物件的方式稍有不同。
去 codepen 看看效果
以 v-for 遍歷陣列顯示
陣列列表顯示的方法是使用v-for
指令,在遍歷的時候語法為<li v-for="(p, index) in persons" :key="index"></li>
在使用v-for
時要記得加上:key
讓單筆的屬性有唯一值,這個陣列的唯一值是 index。
在上面的語法範例,可以想成是<li v-for="(單個陣列, index索引值) in 陣列" :key="index唯一索引值"></li>
。