题:

"""
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>作业</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <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: #eee;
            float: left;
            margin: 10px;
        }

        .box img {
            width: 200px;
            height: 240px;
        }

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

<body>
<div id="app">
    <h1 @click="page='tv'">TV</h1>
    <h1 @click="page='phone'">Phone</h1>
    <div class="wrap" >
        <local-tag1 v-for="tv in tvs" :tv="tv" v-if="page==='tv'" @action="actionFn"></local-tag1>
        <local-tag2 v-for="phone in phones" :phone="phone" v-if="page==='phone'" @action="actionFn"></local-tag2>
    </div>
    <h2 >{{ h1 }}</h2>
</div>
</body>
<script src="../vue.js"></script>
<script>
    let tvs = [
        {img: 'tv1.jpg', title: 'tv1'},
        {img: 'tv1.jpg', title: 'tv2'},
        {img: 'tv1.jpg', title: 'tv3'},
        {img: 'tv1.jpg', title: 'tv4'},
    ];

    let phones = [
        {img: 'phone1.jpg', title: 'phone1'},
        {img: 'phone1.jpg', title: 'phone2'},
        {img: 'phone1.jpg', title: 'phone3'},
        {img: 'phone1.jpg', title: 'phone4'},
    ];

    let localTag1 = {
        props: ['tv'],

        template: `
        <div class="box" @click="fn">
            <img :src="tv.img" alt="">
            <h2>{{ tv.title }}</h2>
         </div>
        `,

        methods: {
            fn() {
                console.log(this.tv.title);
                this.$emit('action', this.tv.title);
            }
        }
    };
    let localTag2 = {
        props: ['phone'],

        template: `
        <div class="box" @click="fn">
            <img :src="phone.img" alt="">
            <h2>{{ phone.title }}</h2>
<!--            <h2 style="display: none">{{ name }}</h2>-->
        </div>
        `,

        methods: {
            fn() {
                console.log(this.phone.title);
                this.$emit('action', this.phone.title);
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            tvs,
            phones,
            page: 'phone',
            h1: '未选中任何内容!'
        },
        components: {
            localTag1,
            localTag2,
        },
        methods: {
            actionFn(a) {
                if (!a){
                    this.h1='未选中任何内容!'

                }
                else{
                    console.log(a);
                this.h1 = a
                }
            }
        }
    })

</script>
</html>

day 67作业

题:

答:

猜你喜欢