vue for屬性的作用是循環渲染數組或對象的數據,常用于渲染列表。
<div v-for="(item, index) in list">
{{ index }}:{{ item.name }}
</div>
上面的代碼中,v-for指令用于循環渲染list數組中的每一個元素,item表示當前元素,index表示當前元素所在的下標。在div標簽中使用{{}}表示要渲染的數據,通過拼接字符串的方式展示index和item.name。
在v-for中可以加入參數,控制循環的起點、終點、步長等:
<div v-for="(item, index) in list.slice(1, 3)" :key="item.id">
{{ index }}:{{ item.name }}
</div>
上面代碼中,list.slice(1, 3)表示從第二個元素開始循環到第四個元素,key屬性有助于提升渲染性能。
v-for的用法不僅限于數組,還可以用于對象:
<div v-for="(value, key) in userInfo">
{{ key }}:{{ value }}
</div>
上面代碼中,userInfo是一個對象,v-for會循環渲染userInfo中的每一個屬性,完成鍵值對的渲染。
總的來說,vue for屬性是一個非常常用的指令,我們可以借助它很方便地渲染數組或對象的數據,同時也可以用參數控制循環的方式。