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開始