循环使用 v-for 指令。
v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
< div id = "app" > < ol > < li v-for = "site in sites" > {{ site.name }} </ li > </ ol ></ div > < script >new Vue({ el: '#app', data: { sites: [ { name: 'jb51' }, { name: 'Google' }, { name: 'Taobao' } ] } })</ script > |
模板中使用 v-for:
< ul > < template v-for = "site in sites" > < li >{{ item.name }}</ li > < li >--------------</ li > </ template > </ ul > |
v-for 可以通过一个对象的属性来迭代数据:
< div id = "app" > < ul > < li v-for = "value in object" > {{ value }} </ li > </ ul ></ div > < script >new Vue({ el: '#app', data: { object: { name: '菜鸟学堂', url: 'http://edu.jb51.net.', slogan: '学的不仅是技术,更是梦想!' } } })</ script > |
你也可以提供第二个的参数为键名:
< div id = "app" > < ul > < li v-for = "(value, key) in object" > {{ key }} : {{ value }} </ li > </ ul > </ div > |
第三个参数为索引:
< div id = "app" > < ul > < li v-for = "(value, key, index) in object" > {{ index }}. {{ key }} : {{ value }} </ li > </ ul > </ div > |
v-for 也可以循环整数