码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-12-02 19:02:37      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:data   turn   数组   nim   对象   script   users   span   const   

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

 

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

标签:data   turn   数组   nim   对象   script   users   span   const   

原文地址:https://www.cnblogs.com/somethingWithiOS/p/11972135.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!