day 69作业

"""
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) 一个字典作为一个显示单位,定义一个子组件进行渲染(涉及父子组件传参)

3、在第2题基础上,页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)
i)当没有点击任何广告,h2 标签显示:未选中任何广告
ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <style>
        body, h2 {
            margin: 0;
        }
        .wrap {
            width: 880px;
            margin: 0 auto;
        }
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }
        .box {
            width: 200px;
            border-radius: 10px;
            overflow: hidden;
            background-color: grey;
            float: left;
            margin: 10px;
        }
        .box img {
            width: 100%;
        }
        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20%;
        }
         button {
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="d1">

    <div class="wrap">
        <button @click="ad_arr = ad_data.tv">电视</button>
        <button @click="ad_arr = ad_data.phone">手机</button>

        <local-tag v-for="ad in ad_arr" :ad="ad"></local-tag>
    </div>
</div>

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

    ad_data = {
        tv: [
            {img: 'img1/tv/001.jpg', title: 'tv1'},
            {img: 'img1/tv/002.jpg', title: 'tv2'},
            {img: 'img1/tv/003.jpg', title: 'tv3'},
            {img: 'img1/tv/004.jpg', title: 'tv4'},
        ],
        phone: [
            {img: 'img1/phone/001.jpg', title: 'phone1'},
            {img: 'img1/phone/002.jpg', title: 'phone2'},
            {img: 'img1/phone/003.jpg', title: 'phone3'},
            {img: 'img1/phone/004.jpg', title: 'phone4'},
        ]
    };

    new Vue({
        el: '#d1',
        data: {
            ad_data,
            ad_arr: '',
        },
        components: {
            localTag
        },
    })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2</title>
    <style>
        body, h2 {
            margin: 0;
        }

        .wrap {
            width: 880px;
            margin: 0 auto;
        }

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

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

        .box img {
            width: 100%;
        }

        h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div class="wrap">
        <p>
            <button @click="ad_arr=ad_data.tv; v1='当前未选择任何商品'">电视</button>
            <button @click="ad_arr=ad_data.phone; v1='当前未选择任何商品'">手机</button>
        </p>

        <local-tag v-for="ad in ad_arr" :ad="ad" @action="actionFn"></local-tag>
    </div>
    <h2>{{ v1 }}</h2>
</div>

<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['ad'],
        template: `
        <div class="box" @click="clickFn">
        <img :src="ad.img" alt="">
        <h2>{{ ad.title }}</h2>
        </div>
        `,
        data() {
            return {
                ad_title: '',
            }
        },
        methods: {
            clickFn() {
                this.$emit('action', this.ad.title)
            }
        }
    };

    ad_data = {
        tv: [
            {img: 'img1/tv/001.jpg', title: 'tv1'},
            {img: 'img1/tv/002.jpg', title: 'tv2'},
            {img: 'img1/tv/003.jpg', title: 'tv3'},
            {img: 'img1/tv/004.jpg', title: 'tv4'},
        ],
        phone: [
            {img: 'img1/phone/001.jpg', title: 'phone1'},
            {img: 'img1/phone/002.jpg', title: 'phone2'},
            {img: 'img1/phone/003.jpg', title: 'phone3'},
            {img: 'img1/phone/004.jpg', title: 'phone4'},
        ]
    };

    new Vue({
        el: '#d1',
        data: {
            ad_data,
            ad_arr: '',
            v1: '当前未选择任何广告',
        },
        components: {
            localTag
        },
        methods: {
            actionFn(ad_title) {
                this.v1 = ad_title + '被选中';
            }
        }
    })
</script>
</body>
</html>
posted @ 2019-12-19 08:25  colacheng  阅读(92)  评论(0编辑  收藏  举报
Live2D