1. 有以下广告数据（实际数据命名可以略做调整）

    1. ad_data = {
    2.  tv: [
    3.      {img: 'img/tv/001.png', title: 'tv1'},
    4.      {img: 'img/tv/002.png', title: 'tv2'},
    5.      {img: 'img/tv/003.png', title: 'tv3'},
    6.      {img: 'img/tv/004.png', title: 'tv4'},
    7.  ],
    8.  phone: [
    9.      {img: 'img/phone/001.png', title: 'phone1'},
    10.      {img: 'img/phone/002.png', title: 'phone2'},
    11.      {img: 'img/phone/003.png', title: 'phone3'},
    12.      {img: 'img/phone/004.png', title: 'phone4'},
    13.  ]
    14. }

    i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据

    ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

  2. 在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
    i）当没有点击任何广告，h2 标签显示：未选中任何广告
    ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box {
  8.             width: 300px;
  9.             height: 300px;
  10.             float: left;
  11.         }
  13.         .img {
  14.             width: 300px;
  15.             height: 200px;
  16.         }
  18.         .title {
  19.             text-align: center;
  20.         }
  22.         .clear-fix:after {
  23.             content: "";
  24.             display: block;
  25.             clear: both;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div id="app">
  31.     <h1 @click="clickTv">电视</h1>
  32.     <h1 @click="clickPhone">手机</h1>
  33.     <div class="clear-fix">
  34. <!--        组件传参（子传父）、通过自定义事件将子组件中参数传出-->
  35. <!--        注意：子组件的自定义事件名不要取驼峰体，否则，vue实例对象中，通过事件名传出参数时，该参数名要进行变形：A->-a  "-->
  36.         <tag v-for="dic in dic1":dic="dic" @tagaction="action"></tag>
  37.     </div>
  38. <!--    组件传参（父传子）-->
  39.     <ad :advert="advert"></ad>
  41. </div>
  42. </body>
  43. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  44. <script>
  46.     let ad_data = {
  47.         tv: [
  48.             {img: 'img/tv/001.png', title: 'tv1'},
  49.             {img: 'img/tv/002.png', title: 'tv2'},
  50.             {img: 'img/tv/003.png', title: 'tv3'},
  51.             {img: 'img/tv/004.png', title: 'tv4'},
  52.         ],
  53.         phone: [
  54.             {img: 'img/phone/001.png', title: 'phone1'},
  55.             {img: 'img/phone/002.png', title: 'phone2'},
  56.             {img: 'img/phone/003.png', title: 'phone3'},
  57.             {img: 'img/phone/004.png', title: 'phone4'},
  58.         ]
  59.     };
  61.     let tag = {
  62.         props: ['dic',],
  63.         template: `
  64.          <div class="box" @click="adClick(dic.title)">
  65.             <img :src="dic.img" alt="" class="img">
  66.             <div class="title">{{dic.title}}</div>
  67.         </div>
  68.         `,
  69.         methods: {
  70.             adClick(title){
  71.                 // 通过$emit触发tagaction事件，同时回调参数
  72.                 // 注意：这里的自定义事件名如果是驼峰体，要注意变形
  73.                 this.$emit('tagaction',title)
  75.     }
  76.         }
  77.     };
  79.     let ad = {
  80.         props: ['advert'],
  81.         template: `
  82.         <h2 >{{advert}}</h2>
  83.         `
  84.     };
  86.     new Vue({
  87.         el: '#app',
  88.         data: {
  89.             dic1: '',
  90.             type: "",
  91.             advert: '未选中广告',
  93.         },
  94.         components: {
  95.             tag,
  96.             ad,
  97.         },
  98.         methods: {
  99.             clickTv() {
  100.                 this.type = 'tv'
  101.             },
  102.             clickPhone() {
  103.                 this.type = 'phone'
  104.             },
  105.             action(title){
  106.                 console.log(title);
  107.                 this.advert = title+'被选中'
  108.             }
  109.         },
  110.         watch: {
  111.             // 通过监听type参数来判断用户点击了哪个按钮从而显示对应的tv或者phone
  112.             type() {
  113.                 this.dic1 = ad_data[this.type]
  114.             }
  115.         },
  116.     })
  117. </script>
  118. </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. Android 项目优化（一）：项目代码规范优化

    项目代码规范为主要包含:类,常量,变量,ID等命名规范:注释规范:分包规范:代码风格规范. 项目代码规范是软件开发过程中非常重要的优化环节. 目前的开发社区提供了很多的开发规范文档,阿里巴巴推出了&l ...

  2. 短信相关的AT指令以及信令

    本文链接:https://blog.csdn.net/sjz4860402/article/details/78552756 此次的短信AT指令和信令从以下几个方面介绍: 一 . 短信AT指令的格式二 ...

  3. python 基础学习笔记（7）--迭送器

    **函数名的运用** - [ ] 函数名是一个变量, 但它是一个特殊的变量, 与括号配合可以执行函数的变量 **函数名的内存地址** ```  def func():  print('666')  p ...

  4. [Go] 实现面向对象中的继承和覆盖方法

    go中的继承是使用结构体嵌套实现的,可以继承父类的方法 覆盖和其他面向对象的语言是一样的,函数名,参数,返回类型一致,就可以覆盖父类的方法 package main import "log& ...

  5. CSS新特性之3D转换

    1. 三维坐标系 x轴:水平向右(右边是正,左边是负) y轴:垂直向下(向下是正,向上是负) z轴:垂直屏幕(向外是正,向里是负) 2. 3D转换 3D转换中最常用的是3D位移和3D旋转.主要知识点如 ...

  6. 【python爬虫】Xpath

    一.xml是什么 1.定义:可扩展标记性语言 2.特点:xml的是具有自描述结构的半结构化数据. 3.作用:xml主要设计宗旨是用来传输数据的.他还可以作为配置文件. 二.xml和html的区别 1. ...

  7. Python实现单链表数据的添加、删除、插入操作

    Python实现单链表数据的添加.删除.插入操作 链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结 ...

  8. python-paramiko对远程服务器终端的操作

    1.with open写文件到本地 2.paramiko SFTPClient将文件推到salt服务端 3.paramiko SSHClient通过salt-cp将文件分发给目标服务器 1. with ...

  9. 如何封装$on,$emit,$off——学vue前你必须懂得封装！

    let evevtListenr = {} 封装$on const $on = (eventName,cb)=>{     if(!evevtListenr[eventName]){       ...

  10. 使用fidder对安卓模拟器进行抓包

    本文主要介绍fiddler4对安卓模拟器的抓包设置 首先在官网下载fiddler4进行安装,然后下载安卓模拟器,这里使用网易的MuMu模拟器. 1.fiddler4的设置对于fiddler4的设置,首 ...