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. Java学习 1.1——（JVM介绍）Java为什么能够跨平台？

    首先介绍一下Java的各个层级,先放一张图: 硬件,操作系统和操作系统接口:这三级不说大家都知道,操作系统有很多种,比如Windows,Linux.Windows又分为win7,win10,win x ...

  2. 基于SpringBoot前后端分离的点餐系统

    基于SpringBoot前后端分离的点餐系统 开发环境:主要采用Spring boot框架和小程序开发 项目简介:点餐系统,分成卖家端和买家端.买家端使用微信小程序开发,实现扫码点餐.浏览菜单.下单. ...

  3. ES6-WeakSet数组结构

    WeakSet 也会去重 总结: 1.成员都是对象: 2.成员都是弱引用,可以被垃圾回收机制回收,可以用来保存 DOM 节点,不容易造成内存泄漏: 3.不能遍历,方法有 add.delete.has. ...

  4. OpenStack与ZStack深度对比：架构、部署、计算、运维监控等

    摘要 OpenStack从2010年开源至今,已经走过9个年头,其正在进入主流企业市场,但该项目依然面临较难部署和管理的老问题.有一点是毫无疑问的,那就是OpenStack保持着高速增长的态势,超过5 ...

  5. GithubPages+Hexo博客搭建记录

    目录 前言 安装Node.js 安装Git 安装Hexo 查看效果 建立Github Pages 注册Github帐户 建立托管博客的仓库 制作SSH密钥 添加公钥到Github 测试连接 把本地的博 ...

  6. BZOJ2820/LG2257 YY的GCD 莫比乌斯反演

    问题描述 BZOJ2820 LG2257 题解 求 \(\sum\limits_{i=1}^{n}{\sum\limits_{j=1}^{m}{[gcd(i,j)==p]}}\) ,其中 \(p\)为 ...

  7. Mysql的旧版本下载地址

    直接进入:http://downloads.mysql.com/archives/community/

  8. C语言结构选择语句

    总结一下常用的if else与switch,其中switch中的break知识点是笔试题经常考到的内容. if else与else if 在C语言中,经常使用if else选择语句,来实现很多对应的功 ...

  9. SpringCloud微服务(06)：Config组件，实现配置统一管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.Config简介 在微服务系统中,服务较多,相同的配置:如数据库信息.缓存.参数等,会出现在不同的服务上,如果一个配置发生变化,需要修改很 ...

  10. APC的本质

     Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html APC的本质 一.对于线程关闭问题的启发 线程,本身占据CPU, ...