Vue基础学习 --- 遍历数组 

<body>
    <div id="app">
        <ul>
        <!-- 遍历数组 -->
            <li v-for="user in users">
                 {{user.name}}:{{user.age}}
            </li>

            <!-- index索引，从0开始。 -->
            <li v-for="(item, index) in users" :key="index">
                {{item.name}}:{{item.age}}
            </li>

        <!-- 遍历对象 value值如：Nimeide   index键如:name-->
            <li v-for="(value, index) in wife" :key="index">
                {{value}}--{{index}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    // 数组
                    users: [
                        { name: 'lisi', age: 12 },
                        { name: 'zhangsan', age: 19 },
                    ],
                    // 对象
                    wife: {
                        name: 'Nimeide',
                        age: 18
                    }
                }
            },
        });
    </script>
</body>

 

posted @ 2019-12-02 17:47  码锋窝  阅读(1086)  评论(0)    收藏  举报