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. python的学习大纲

    python基础部分 函数 初识函数 函数进阶 装饰器函数 迭代器和生成器 内置函数和匿名函数 递归函数 常用模块 常用模块 模块和包 面向对象 初识面向对象 面向对象进阶 网络编程 网络编程 并发编 ...

  2. PHP服务化搭建之nginx动静分离实战

    如有什么问题可以加群交流:647617935 什么是动静分离 动静分离:将项目中的CSS,JS,HTML,JPG'.等静态资源和 PHP等动态资源分开处理的一种方式 动静分离优点 不同的文件由不同类型 ...

  3. C lang: The Command line

    Ax_command line h Ax_a command line describe The command line is in enviroment for DOS,to user opera ...

  4. python 基础学习笔记（6）--函数（1）

    ## **函数(1)** **函数的定义:** 1. [ ] 小时候大家应该都玩过乐高积木,只要通过想象和创意,可以用它怕拼凑出很多神奇的东西.随着学习的深入,编写的代码日益增加并且越来越复杂,所以需 ...

  5. Linux 目录管理的相关命令

    mkdir,rmdir 创建目录mkdir -p:当上级目录不存在时,自动创建上级目录 -v:显示创建过程 $ mkdir -pv /tmp/x/y/z/ mkdir: created directo ...

  6. Django中获取参数(路径，查询，请求头，请求体)

    一.通常HTTP协议向服务器传参有几种途径 : 提取URL的特定部分,如/weather/shanghai/2018,可以在服务器端的路由中用正则表达式截取: 查询字符串(query string), ...

  7. office2019专业版激活秘钥 激活码

    office2019专业版激活码 激活秘钥 2019年5月更新 [Key]:F4QWT-NMMKH-XPTV9-W9HFB-B4JCQ [剩余次数:900000+] office2019激活 产品秘钥 ...

  8. FreeHttp1.2升级说明

    一.升级方法 下载新版本插件 https://files.cnblogs.com/files/lulianqi/FreeHttp1.2.zip  或 http://lulianqi.com/file/ ...

  9. ReactNative: 使用Touchable触摸类组件

    一.简介 在应用程序中,最灵魂的功能就是交互.通过给应用程序的组件添加事件来实现交互,进而提高用户体验.然而,ReactNative并不能像Web开发那样可以给大多数的标签元素绑定click事件,例如 ...

  10. js中触发表单提交

    html代码: <form action="/test/action" method="get" id="myForm"> &l ...