v-for循环数组

最新推荐文章于 2024-04-29 03:21:44 发布

雄大y

最新推荐文章于 2024-04-29 03:21:44 发布

阅读量846

点赞数 1

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/yc8803/article/details/118466126

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue3.x中使用模板语法进行数据循环展示的方法，包括`v-for`指令的使用，以及如何指定`key`属性。示例代码展示了如何遍历列表并显示`list1`、`list2`和`list3`的数据，其中`list3`为嵌套结构。内容详细解释了在循环中如何访问和渲染对象数组的属性。

摘要由CSDN通过智能技术生成

业务逻辑：

export default {
    name: "App",
    data() {
        return {
            list1: ['马总', '刘总', '李总'],
            list2: [{
                    'title': '新闻111'
                },
                {
                    'title': '新闻222'
                },
                {
                    'title': '新闻33'
                },
                {
                    'title': '新闻44'
                }
            ],
            list3: [{
                    "cate": "国内新闻",
                    "list": [

                        {
                            'title': '国内新闻11111'
                        },
                        {
                            'title': '国内新闻2222'
                        }
                    ]
                },
                {
                    "cate": "国际新闻",
                    "list": [

                        {
                            'title': '国际新闻11111'
                        },
                        {
                            'title': '国际新闻2222'
                        }
                    ]
                }

            ]

        };
    },
};

template模板：

注意vue3.x中循环数据需要制定key，代码如下

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

<ul>
    <li v-for="(item,index) in list2" :key="index">
        {{item.title}}
    </li>
</ul>


<ul>
    <li v-for="(item,index) in list3" :key="index">
        {{item.cate}}
        <ol>
            <li v-for="(news,i) in item.list" :key="i">
                {{news.title}}
            </li>
        </ol>

    </li>
</ul>