列表渲染

創(chuàng)建 06-列表渲染.html

v-for：列表循環(huán)指令

例1：簡單的列表渲染

<!-- 1、簡單的列表渲染 --> <ul><li v-for="n in 10">{{ n }} </li> </ul> <ul><!-- 如果想獲取索引，則使用index關(guān)鍵字，注意，圓括號中的index必須放在后面 --><li v-for="(n, index) in 5">{{ n }} - {{ index }} </li> </ul>

例2：遍歷數(shù)據(jù)列表

data: {userList: [{ id: 1, username: 'helen', age: 18 },{ id: 2, username: 'peter', age: 28 },{ id: 3, username: 'andy', age: 38 }] } <!-- 2、遍歷數(shù)據(jù)列表 --> <table border="1"><!-- <tr v-for="item in userList"></tr> --><tr v-for="(item, index) in userList"><td>{{index}}</td><td>{{item.id}}</td><td>{{item.username}}</td><td>{{item.age}}</td></tr> </table>

?

總結(jié)

以上是生活随笔為你收集整理的vue指令-循环指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。