v-for · Vue從入門到實戰

## v-for指令 **類型：** Array | Object | number | string **用法：** 基于源數據多次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression ，為當前遍歷的元素提供別名： >[info]示例： ~~~ <div v-for="item in items"> {{ item.text }} </div> ~~~ >[success]代碼示例1： ~~~ <div id="demo"> <ol> <li v-for='value in arr'> {{value}} </li> </ol> </div> <script type="text/javascript"> new Vue({ el: '#demo', data: { arr:['apple','banana','orange','pear'], json:{a:'張三',b:'李四',c:'王五'} } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for1.html 效果如圖： ![](https://box.kancloud.cn/a279ffb75fcb134a898c8bbc1b91eb1a_291x261.png) ---- >[success]代碼示例2： ~~~ <div id="demo"> <ol> <li v-for='value in arr'> {{value}} </li> </ol> <hr /> <ol> <li v-for='(value,index) in arr'> {{value}} {{index}} </li> </ol> <hr /> <ol> <li v-for='(item,index) in json'> {{item}} {{index}} </li> </ol> <hr /> <ol> <li v-for='(val,key) in json'> {{val}} {{key}} </li> </ol> <hr /> <ol> <li v-for='(val,key,index) in json'> {{val}} {{key}} {{index}} </li> </ol> </div> <script type="text/javascript"> new Vue({ el: '#demo', data: { arr:['apple','banana','orange','pear'], json:{a:'張三',b:'李四',c:'王五'} } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for2.html 效果如圖： ![](https://box.kancloud.cn/09c3dce9653c5c6fdc1515a430e99d42_240x597.png) --- 下面我們通過v-for來實現一個用戶信息表 ![](https://box.kancloud.cn/fe54f48330d40968cd2e34617522bd6d_639x257.png) >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for3.html >[success] 附完整代碼 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1{ text-align: center; } table, td, th { border-collapse: collapse; border-spacing: 0 } table { width: 600px; margin: 0 auto; } td, th { border: 1px solid #bcbcbc; padding: 5px 10px; } th { background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer; } tr:nth-of-type(odd) { background: #fff; } tr:nth-of-type(even) { background: #eee; } </style> </head> <body> <div id="app"> <h1>用戶信息表</h1> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> <th>Addr</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> <td>{{ person.addr }}</td> </tr> </tbody> </table> </div> </body> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { people: [{ name: 'Jack', age: 30, sex: 'Male', addr:'重慶' }, { name: 'Bob', age: 18, sex: 'Male', addr:'紐約' }, { name: 'Nini', age: 22, sex: 'Female', addr:'北京' }, { name: 'Mary', age: 16, sex: 'Male', addr:'上海' }] } }) </script> </html> ~~~