列表渲染

創建 06-列表渲染.html

v-for：列表循環指令

例1：簡單的列表渲染

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

例2：遍歷數據列表

data: {userList: [{ id: 1, username: 'helen', age: 18 },{ id: 2, username: 'peter', age: 28 },{ id: 3, username: 'andy', age: 38 }] } <!-- 2、遍歷數據列表 --> <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>

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。