Vue——列表渲染（上）

Coding-弱鱼

已于 2022-08-19 16:04:09 修改

阅读量237

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 es6 开发语言

于 2022-08-18 15:57:53 首次发布

本文链接：https://blog.csdn.net/weixin_47412580/article/details/126406522

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

列表渲染的解析

一、列表渲染是一个比较重要的知识点
在这里插入图片描述
最终渲染出来就是这样的一个结果，vue来进行数据存储和管理。
二、方法实现

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <link rel="shortcut icon" href="phone.ico" type="image/x-icon" />
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <div id="root">
        <h3>人员信息列表</h3>
        <ul>
            <!-- 在使用v-for in 进行遍历的时候，就必须给每一个遍历的对象给一个特定的标识
            id -->
            <li v-for="p in persons" :key="p.id">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
        <h3>
            汽车对象信息
        </h3>
        <ul>
            <li v-for="(value,key) in Cars" :key="key">
                {{key}}--{{value}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            // 在data里面放置首先是persons,数组对象
            persons: [{
                id: '001',
                name: 'ZXY',
                sex: 'man',
                age: 18
            },
            {
                id: '002',
                name: 'LDH',
                sex: 'man',
                age: 19
            },
            {
                id: '003',
                name: 'HH',
                sex: 'women',
                age: 29
            }
            ],
            Cars: {
                brand: '奇瑞',
                price: 190000,
                color: 'white'
            }
        }
    })
</script>

</html>