Vue · for循环：遍历对象、遍历对象数组

Document<div id="app"><div v-for="(value, key, index) in object">{{ index }}. {{ key }} - {{ value }}</div><div v-for=...

梦想退休的许小姐

4032人浏览 · 2021-10-20 22:07:34

梦想退休的许小姐 · 2021-10-20 22:07:34 发布


<div id="app">

    <!-- 对象遍历 -->
    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }} - {{ value }}
    </div>

    <!-- 数组对象遍历 -->
    <div v-for="(value, key, index) in objectArray">
        姓名：{{value.name}}
        年龄:{{value.age}}
    </div>

</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            // 对象
            object: {
                name: '张三',
                names: '李四'
            },

            // 数组对象
            objectArray: [
                {
                    name: '张三',
                    age: 14
                },
                {
                    name: '李四',
                    age: 18
                }
            ]
        }
    })
</script>