使用v-for遍历数据

遍历数组

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>

具体代码

遍历数组

遍历数组中的对象

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>

具体代码

遍历数组中的对象

遍历对象

let vm = new Vue({
    el: "#app",
    data: {
        user: {
            '姓名': '窃.格瓦拉',
            '性别': '男',
            '名言': '打工是不可能打工的，这辈子都不可能打工的'
        }
    }
})

<p v-for="(val, key, i) in user">
    {{ key }} : {{ val }}
</p>

具体代码

遍历对象

遍历整数

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>

具体代码

遍历整数

如想了解更多的vue实例，请查阅我的vue笔记目录