day67作业

"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
    tv: [
        {img: 'img/tv/001.png', title: 'tv1'},
        {img: 'img/tv/002.png', title: 'tv2'},
        {img: 'img/tv/003.png', title: 'tv3'},
        {img: 'img/tv/004.png', title: 'tv4'},
    ],
    phone: [
        {img: 'img/phone/001.png', title: 'phone1'},
        {img: 'img/phone/002.png', title: 'phone2'},
        {img: 'img/phone/003.png', title: 'phone3'},
        {img: 'img/phone/004.png', title: 'phone4'},
    ]
}

i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
"""
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        h2 {
            margin: 0;
        }

        .wrap {
            margin: 0 auto;
        }

        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 200px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #eee;
            float: left;
            margin: 10px;
        }

        .box img {
            width: 100%;
            height: 280px;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
    </style>

</head>

<body>
    <div id="app">
        <p>
            <button @click="change_ad('tv')">电视</button>
            <button @click="change_ad('phone')">手机</button>
        </p>
        <div class="wrap">
            <tag v-for=" ad in ads" :ad='ad'></tag>
        </div>

</body>
<script src="js/vue.js"></script>
<script>
    let ad_data = {
        tv: [{
                img: 'img/001.jpg',
                title: 'tv1'
            },
            {
                img: 'img/002.jpg',
                title: 'tv2'
            },

        ],
        phone: [{
                img: 'img/100.jpg',
                title: 'phone1'
            },
            {
                img: 'img/200.jpg',
                title: 'phone2'
            },
            {
                img: 'img/300.jpg',
                title: 'phone3'
            },
            {
                img: 'img/400.jpg',
                title: 'phone4'
            },
        ]
    }

    let tag = {
        props: ['ad'],
        template: `<div class="box">
                    <img :src="ad.img" alt="">
                    <h2>{{ ad.title }}</h2>
                </div>`

    };


    new Vue({
        el: '#app',
        data: {
            ads: ad_data['tv'],
        },
        methods: {
            change_ad(ad) {
                this.ads = ad_data[ad]
            },
        },
        components: {
            tag: tag

        }
    })
</script>

</html>
"""
3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
"""
猜你喜欢
