Vue2：用Vue框架实现 - JSON数据渲染页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>

<body>
    <!-- 4.for循环实现json数据的渲染 -->
    <style>
        .user {
            width: 500px;
            height: 200px;
            background-color: rgb(176, 196, 176);
            padding: 10px;
            margin: 10px;
            border-radius: 10px;

        }
        .info{
            color: rgb(11, 96, 96);
        }
        img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    </style>
    <div class="box">
        <div v-for="el in arr" :class="{user:u}">
            <div class="name">
                <img :src="el.touxiang" alt="">
                {{el.name}}
            </div>
            <div v-for="el in el.info" class="info">
                <div class="num">{{el}}</div>
                <!-- <div v-text="el.info.signal" class="txt">{{el.text}}</div> -->
            </div>
        </div>
    </div>
    <script>

        var vm = new Vue({
            el: ".box",
            data: {
                arr: [{
                    touxiang: "./flower.png",
                    name: "name1",
                    age: "1",
                    info: {
                        num: 123456,
                        signal: "hello",
                        online: 0,
                    }
                },
                {
                    touxiang: "./flower2.png",
                    name: "name2",
                    age: "2",
                    info: {
                        num: 123456,
                        signal: "hello",
                        online: 1,
                    }
                },
                {
                    touxiang: "./flower2.png",
                    name: "name3",
                    age: "3",
                    info: {
                        num: 123456,
                        signal: "hello",
                        online: 0,
                    }
                },
                {
                    touxiang: "./flower.png",
                    name: "name4",
                    age: "4",
                    info: {
                        num: 123456,
                        signal: "hello",
                        online: 1,
                    }
                },
                {
                    touxiang: "./flower.png",
                    name: "name5",
                    age: "5",
                    info: {
                        num: 123456,
                        signal: "hello",
                        online: 1,
                    }
                },
                {
                    touxiang: "./flower2.png",
                    name: "name6",
                    age: "6",
                    info: {
                        num: 123456,
                        signal: "hello",
                        online: 0,
                    }
                },],
                u: true,
            },
        })

    </script>
</body>

</html>
posted on 2022-08-31 22:44 香香鲲阅读(695) 评论(0) 收藏举报