1. 有以下广告数据(实际数据命名可以略做调整)

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

  2. 在第1题基础上,页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)
    i)当没有点击任何广告,h2 标签显示:未选中任何广告
    ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            float: left;
        }

        .img {
            width: 300px;
            height: 200px;
        }

        .title {
            text-align: center;
        }

        .clear-fix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 @click="clickTv">电视</h1>
    <h1 @click="clickPhone">手机</h1>
    <div class="clear-fix">
<!--        组件传参(子传父)、通过自定义事件将子组件中参数传出-->
<!--        注意:子组件的自定义事件名不要取驼峰体,否则,vue实例对象中,通过事件名传出参数时,该参数名要进行变形:A->-a  "-->
        <tag v-for="dic in dic1":dic="dic" @tagaction="action"></tag>
    </div>
<!--    组件传参(父传子)-->
    <ad :advert="advert"></ad>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let 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'},
        ]
    };

    let tag = {
        props: ['dic',],
        template: `
         <div class="box" @click="adClick(dic.title)">
            <img :src="dic.img" alt="" class="img">
            <div class="title">{{dic.title}}</div>
        </div>
        `,
        methods: {
            adClick(title){
                // 通过$emit触发tagaction事件,同时回调参数
                // 注意:这里的自定义事件名如果是驼峰体,要注意变形
                this.$emit('tagaction',title)

    }
        }
    };

    let ad = {
        props: ['advert'],
        template: `
        <h2 >{{advert}}</h2>
        `
    };

    new Vue({
        el: '#app',
        data: {
            dic1: '',
            type: "",
            advert: '未选中广告',

        },
        components: {
            tag,
            ad,
        },
        methods: {
            clickTv() {
                this.type = 'tv'
            },
            clickPhone() {
                this.type = 'phone'
            },
            action(title){
                console.log(title);
                this.advert = title+'被选中'
            }
        },
        watch: {
            // 通过监听type参数来判断用户点击了哪个按钮从而显示对应的tv或者phone
            type() {
                this.dic1 = ad_data[this.type]
            }
        },
    })
</script>
</html>
05-28 05:48