VUE——v-for指令的四種使用方式

v-for循環普通數組

    <div id="app">
        <p v-for="(item, i) in list">索引值: {{i}} --- 每一項: {{item}}</p>
    </div>
    <script>
        //創建Vue實例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1,2,3,4,5,6]
            },
            methods: {}
        });
    </script>

v-for循環對象數組

    <div id="app">
        <p v-for="user in list">Id: {{ user.id }} --- 名字: {{ user.name }}</p>
    </div>
    <script>
        //創建Vue實例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {id:1, name: 'zs1'},
                    {id:2, name: 'zs2'},
                    {id:3, name: 'zs3'},
                    {id:4, name: 'zs4'},
                ]
            },
            methods: {
            }
        });
    </script>

v-for循環對象

    <div id="app">
        <!--注意：在遍歷對象身上鍵值對的時候，除了有val key，在第三個位置還有一個索引-->
        <p v-for="(val, key, i) in user">值是: {{ val }} --- 鍵是: {{ key }} -- 索引: {{i}}</p>
    </div>

    <script>
        //創建Vue實例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                user:{
                    id:1,
                    name: 'wxy',
                    gender: '男'
                }
            },
            methods: {
            }
        });
    </script>

v-for迭代數字

    <div id="app">
        <!--in後面還可以放數字-->
        <!--如果使用v-for迭代數字的話，前面的count值從1開始-->
        <p v-for="count in 10">這是第{{ count }}次循環</p>
    </div>

    <script>
        //創建Vue實例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>