遍历数组
- let vm = new vue({
- el: "#app",
- data: {
- title: '金庸英雄',
- heros: ['乔峰', '段誉', '虚竹', '郭靖', '杨过']
- }
- })
- <ul class="list-group">
- <li class="list-group-item" v-for="(value, key) in heros">
- {{ key }} -- {{ value }}
- </li>
- </ul>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/34815855f5770edff751b0890e7e856341704c79/code/01/09.html
遍历数组
遍历数组中的对象
- let vm = new Vue({
- el: "#app",
- data: {
- heros: [
- {'id': 1, name: '曹操', saying: '宁要我负天下人, 休叫天下人负我!'},
- {'id': 2, name: '刘备', saying: '备若有基业, 天下碌碌之辈, 诚不足虑也'},
- {'id': 3, name: '关羽', saying: '汝比颜良, 文丑若何?'},
- ]
- }
- })
- <ul class="list-group">
- <li class="list-group-item" v-for="(hero, index) in heros">
- {{ hero.id }}.{{ hero.name }}:{{ hero.saying }}
- </li>
- </ul>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/34815855f5770edff751b0890e7e856341704c79/code/01/10.html
遍历数组中的对象
遍历对象
- let vm = new Vue({
- el: "#app",
- data: {
- user: {
- '姓名': '窃. 格瓦拉',
- '性别': '男',
- '名言': '打工是不可能打工的, 这辈子都不可能打工的'
- }
- }
- })
- <p v-for="(val, key, i) in user">
- {{ key }} : {{ val }}
- </p>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/34815855f5770edff751b0890e7e856341704c79/code/01/11.html
遍历对象
遍历整数
- let vm = new Vue({
- el: "#app",
- data: {
- sum: 15
- }
- })
- <ul class="list-group">
- <li v-for="count in sum" class="list-group-item">
第 {{ count }} 次循环
</li>
</ul>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/34815855f5770edff751b0890e7e856341704c79/code/01/12.html
遍历整数
来源: http://www.jianshu.com/p/67e37f1b72f5