作业

要求：

"""
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="zh">
<head>
    <meta charset="UTF-8">
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="vue/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <title>子组件</title>
    <style>
        body, h2 {
            margin: 0;
        }

        .wrap {
            width: 880px;
            margin: 0 auto;
        }
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .c1{
            width: 50px;
            height: 120px;
        }

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

        .box img {
            width: 100%;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="wrap">

        <p><h3 class="btn btn-primary" @click="hclick('tv')">{{ tv1 }}</h3></p>
        <p><h3 class="btn btn-primary" @click="hclick('phone')">{{ ph1 }}</h3></p>


        <local-tag v-for="(v,i) in addata" :img_obj="addata" :ind="i" :title="title"></local-tag>


    </div>
</div>
</body>
<script src="vue/vue.min.js"></script>
<script>




    // 声明局部组件：局部组件要在其父组件中注册才能使用
    // 1、声明组件  2、注册组件  3、渲染组件  => 全局组件不需要注册

    let localTag = {
        props:['img_obj','ind','title'],



        template: `
        <div class="box" @click="fn">
            <h3 align="center">{{ img_obj[ind].title }}</h3>
            <img :src=" img_obj[ind].img " alt="" class="c1" @click="img_click(img_obj[ind].title),ind">

            <h3 align="center" v-if="img_obj[ind].title === c_title ">{{ message }}</h3>
        </div>
        `,

        data(){
            return {
                message:'',
                c_title:'',
            }
        },

        methods: {
            fn() {
                console.log(this)
            },
            img_click(title,ind){

                this.c_title = title;
                this.message = '已选中'+ title

            }
        },
    };



        new Vue({
        el: '#app',
        data: {
            tv1:'电视',
            ph1:'手机',
            ad_data:{
                        tv : [
                        {img:'img/tv/001.jpg',title:'tv1'},
                        {img:'img/tv/002.jpg',title:'tv2'},
                        {img:'img/tv/003.jpg',title:'tv3'},
                        {img:'img/tv/004.jpg',title:'tv4'},

                        ],
                        phone: [
                        {img: 'img/phone/1.jpg', title: 'phone1'},
                        {img: 'img/phone/2.jpg', title: 'phone2'},
                        {img: 'img/phone/3.jpg', title: 'phone3'},
                        {img: 'img/phone/4.jpg', title: 'phone4'},
                    ]
                    },
            addata:'',
            title:'',
        },
            methods:{
                hclick(a){
                    if (a === 'tv'){
                        this.title = 'tv';
                        this.addata = this.ad_data.tv;

                    }else if(a === 'phone'){
                        this.title = 'phone';
                        this.addata = this.ad_data.phone;

                    }
                }
            },

        components: {  // 注册组件
            localTag,
        }
    });

</script>
</html>

作业03

作业

猜你喜欢