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>

（day67）作业的更多相关文章

  1. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  2. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  3. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  4. T-SQL检查停止的复制作业代理，并启动

        有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...

  5. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  6. 个人作业week3——代码复审

    1.     软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...

  7. 个人作业-week2：关于微软必应词典的案例分析

    第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...

  8. 软件工程第二次作业——git的使用

    1. 参照 http://www.cnblogs.com/xinz/p/3803109.html 的第一题,每人建立一个GitHub账号,组长建立一个Project,将本组成员纳入此Porject中的 ...

  9. hadoop作业调度策略

    一个Mapreduce作业是通过JobClient向master的JobTasker提交的(JobTasker一直在等待JobClient通过RPC协议提交作业),JobTasker接到JobClie ...

随机推荐

  1. Centos下使用yum命令报错 except KeyboardInterrupt, e: SyntaxError: invalid syntax

    使用yum命令报错 File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: ^ SyntaxError: invalid ...

  2. 使用 getUserMedia API获取麦克风和相机等流媒体

    概览 mediaDevices 是 Navigator 对象的只读属性,一个单列对象,可以连接访问相机和麦克风,屏幕共享等媒体输入设备 方法 enumerateDevices 请求一个可用的媒体输入和 ...

  3. Linux系统学习 十二、VSFTP服务—简介与原理

    1.简介与原理 互联网诞生之初就存在三大服务:WWW.FTP.邮件 FTP主要针对企业级,可以设置权限,对不同等级的资料针对不同权限人员显示. 但是像网盘这样的基本没有权限划分. 简介: FTP(Fi ...

  4. 10. 函数-lambda函数及高阶函数

    一.匿名函数解析 ​ 关键字lambda表示匿名函数,冒号前面的n表示函数参数,可以有多个参数.匿名函数有个限制,就是只能有一个表达式,不用写return,返回值就是该表达式的结果. ​ 用匿名函数有 ...

  5. celery配置

    celery配置 celery的官方文档其实相对还是写的很不错的.但是在一些深层次的使用上面却显得杂乱甚至就没有某些方面的介绍, 通过我的一个测试环境的settings.py来说明一些使用celery ...

  6. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3

    A,有多个线段,求一条最短的线段长度,能过覆盖到所又线段,例如(2,4)和(5,6) 那么我们需要4 5连起来,长度为1,例如(2,10)(3,11),用(3,10) 思路:我们想一下如果题目说的是最 ...

  7. BitMap原理

    BitMap原理  

  8. java之包装类

    针对八种基本数据类型定义相应的引用类型--包装类: 有了类的特点,接可以调用类中的方法: 基本数据类型 包装类 boolean Bollean byte Byte short Short int In ...

  9. tf.train.Saver()

    1. 实例化对象 saver = tf.train.Saver(max_to_keep=1) max_to_keep: 表明保存的最大checkpoint文件数.当一个新文件创建的时候,旧文件就会被删 ...

  10. view WITH CHECK OPTION where-clause violation（查看与检查选项where-子句违反）

    创建视图的语句是设置了 WITH CHECK OPTION 这个条件; 创建视图时,sql语句是这样写的: CREATE  OR  REPLACE  VIEW  RZ_TST_VIEW AS WHER ...