Vue中v-for指令的四种使用

一，循环普通数组

• 1，创建Vue实例对象

<div id="app">
    <p v-for="(item, i) in list">每一项值{{item}}---索引值为{{i}}</p>
</div>

• 2，循环数据

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3]
        },
        methods: {}
    });
</script>

• 结果

二，循环对象数组

• 创建Vue实例对象

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {id: 1, name: 'zs1'},
                {id: 2, name: 'zs2'}
            ]
        },
        methods: {}
    });
</script>

• 循环对象数组

<div id="app">
    <p v-for="(user, i) in list">id为{{user.id}}---name为{{user.name}}--索引值为{{i}}</p>
</div>

• 结果

三，循环对象

• 创建Vue实例对象

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: 'zs',
                gender: 'male'
            }
        },
        methods: {}
    });
</script>

• 循环对象

<div id="app">
    <p v-for="(val, key, i) in user">值是{{val}}---键是{{key}}--索引值为{{i}}</p>
</div>

• 结果

四，迭代数字

• 创建Vue实例对象

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    });
</script>

• 循环数字

<div id="app">
    <p v-for="count in 10">值是{{count}}</p>
</div>

• 结果 注意：count从1开始