<template>
    <h1>app组件</h1>

    <ul>
        <!-- <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li> -->

        <!--
            如果遍历的是数组, 那么第二个参数就是下标
            如果遍历的是对象, 那么第二个参数就是属性名
         -->
        <li v-for="(item, index) in listArr">{{ item }} --- {{ index }}</li>
    </ul>

    <ul>
        <li v-for="(item, key) in listObj">{{ item }} --- {{ key }}</li>
    </ul>

    <ul>
        <li v-for="item in list">{{ item.msg }}</li>
    </ul>
</template>

<script>
export default {
    // 专门存储响应式数据
    data() {
        return {
            listArr: [1, 2, 3, 4, 5],
            listObj: {
                id: "qf001",
                name: "张三",
                age: 18,
                LYY1:'李尹艺',
                LYY2:'L1yyN1'
            },
            list: [
                {
                    id: 1,
                    msg: "文本1",
                },
                {
                    id: 2,
                    msg: "文本2",
                },
                {
                    id: 3,
                    msg: "文本3",
                },
                {
                    id: 4,
                    msg: "文本4",
                },
            ],
        };
    },
    // 专门存储 我们的 事件函数
    methods: {},
};
</script>