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. 运用arcgis sever 进行地图发布

    1.对已有的文件在arcgis中进行编辑:如图 2.从file下拉的目录中找到share as 点击 3.选择自己的manage sever 填写好名称 4.继续下一步 5.重点看capabiliti ...

  2. shell 脚本里的$(( ))、$( )、``与${ }的区别

    shell  脚本里的命令执行 1. 在bash中,$( )与` `(反引号)都是用来作命令替换的. 命令替换与变量替换差不多,都是用来重组命令行的,先完成引号里的命令行,然后将其结果替换出来,再重组 ...

  3. Spring学习的第三天

    问题分析:在刚开始进行银行转账案例时,会获取四个连接,分别是查询接入.转出账户.更新转入.转出账户.这样会使转账不同步,如果某一处出现异常,前面的代码执行了,而后面的更新却没执行,导致一个账户加钱而另 ...

  4. csp2019后的感慨

    你还记得曾经加入oi的初衷吗? ... 我们都不想输,可谁都没有赢... --前言 没有太大的感想,也不配去写感想...就记录一下初学者失败的原因吧.希望看过的人能引以为戒. 做题的时候,不到万不得已 ...

  5. A：mysql数据库章节导航

    mysql数据库章节导航 mysql5.7的安装(yum和二进制安装) 数据库的基本操作 索引 权限管理 日志管理 逻辑备份mysqldump 物理备份:xtrabackup 主从复制-传统方式 主从 ...

  6. C++ std::vector 基本用法

    #include <iostream> #include <vector> using namespace std; int main() { // 初始化的方式 std::v ...

  7. 在CV尤其是CNN领域的一些想法

    现在的CNN还差很多,未来满是变数. 你看,现在的应用领域也无非merely就这么几类----分类识别,目标检测(定位+识别),对象分割......,但是人的视觉可不仅仅这么几个功能啊!是吧. 先说说 ...

  8. 什么是StatefulSet

    简单说来,StatefulSet其实就是一种升级版的Deployment,大体工作原理如下 1.为每个Pod名字按顺序编号,按顺序启动 # kubectl get po -o wide -l app= ...

  9. [Spring cloud 一步步实现广告系统] 6. Service实现&Zuul配置&Test

    DAO层设计实现 这里我们使用Spring DATA JPA来实现数据库操作,当然大家也可以使用Mybatis,都是一样的,我们依然以用户表操作为例: /** * AdUserRepository f ...

  10. 网站报"组策略阻止了这个程序。要获取详细信息，请与系统管理员联系。"错误。

    今天将一个测试的网站发布到阿里云虚拟主机后,访问网站报“组策略阻止了这个程序.要获取详细信息,请与系统管理员联系.”错误.如下: 但是这个错误在本地调试时是没有的. 经过调查,原来罪魁祸首是 Micr ...