[Vue.js] v-for 與列表

標籤: Vue.js javascript

我們可以把 data 裡的陣列物件渲染成列表,利用 v-for="(index, item ) in items" 就可以了,其中的 index 就可以取出當前陣列物件的索引。

 

 用 value in object 可以輸出 object 的值。

 

 使用 (value, key) in object 可以把 key 跟 value 都輸出。

 

再加上 index 可以包含索引值。

 

 搭配 computed 回傳一個新的值。

 

 簡單的 v-for 迴圈:

 

搭配 v-if 判斷如果是空物件就不顯示。

 

 可以使用一些調整陣列的方式來改變列表內容

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

改變陣列調整 list 內容