在Vue中,列表是一種非常常見的數據結構,我們可以使用v-for指令來渲染一個列表。
- {{ item.name }}
上述代碼中,我們使用v-for指令遍歷一個數組items,item為每一項的值,:key則是Vue要求綁定的唯一key。在上述代碼中,我們以li標簽展示每一項的name屬性。
如果我們要使用一個對象作為列表,我們需要使用v-for指令的另一種方式。
- {{ key }} : {{ value }}
在上述代碼中,我們使用了對象解構,value為每一個屬性的值,key為屬性名。我們以li標簽展示了屬性名:屬性值。
如果我們需要在列表中使用嵌套數據,可以使用v-for指令嵌套來完成。
- {{ item.name }}
- {{ subItem.name }}
在上述代碼中,我們首先使用v-for遍歷主列表items,然后在每一項中再使用v-for遍歷子列表subItems。我們同樣以li標簽展示每一項的name屬性。
另外,在列表中可能有一些操作需要做出響應,比如點擊操作。可以使用@click事件來完成。
- {{ item.name }}
在上述代碼中,我們綁定了@click事件,同時傳遞了item.id作為參數給響應函數handleClick。在handleClick函數中,我們可以對item.id進行處理。
還有一種情況需要考慮,那就是當列表數據發生改變時,我們如何做出響應。Vue提供了watch API可以監聽列表數據的改變。
export default { data() { return { items: [] } }, watch: { items(newItems, oldItems) { console.log('list items changed', newItems, oldItems) } } }
在上述代碼中,我們在data中定義了一個空數組items,并在watch中監聽這個數組的變化。當items數組發生變化時,控制臺將輸出'list items changed'以及新舊數組的值。
在Vue中,列表是非常常見的數據結構,我們可以使用v-for指令來遍歷列表。如果需要響應用戶操作,可以使用@click事件,同時watch API可以監聽列表數據的變化。