（day67）作业
有以下广告数据（实际数据命名可以略做调整）
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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
在第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）作业的更多相关文章
- python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）
类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...
- SQLServer2005创建定时作业任务
SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...
- 使用T-SQL找出执行时间过长的作业
有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下: SELECT sj.name , ...
- T-SQL检查停止的复制作业代理，并启动
有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...
- Python09作业思路及源码：高级FTP服务器开发（仅供参考）
高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...
- 个人作业week3——代码复审
1. 软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...
- 个人作业-week2：关于微软必应词典的案例分析
第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...
- 软件工程第二次作业——git的使用
1. 参照 http://www.cnblogs.com/xinz/p/3803109.html 的第一题,每人建立一个GitHub账号,组长建立一个Project,将本组成员纳入此Porject中的 ...
- hadoop作业调度策略
一个Mapreduce作业是通过JobClient向master的JobTasker提交的(JobTasker一直在等待JobClient通过RPC协议提交作业),JobTasker接到JobClie ...
随机推荐
- Angular-----代码风格指南！！！（很重要）
一:文件结构 1).单一规则:坚持每个文件只定义一样东西(例如服务或组件),考虑把文件大小限制在 400 行代码以内. 单组件文件非常容易阅读.维护,并能防止在版本控制系统里与团队冲突: 单组件文件可 ...
- 关于SQL2005备份和还原的语法操作
原数据库:restore database 练习版 from disk='D:\db-recovery\@@@.BAK' WITH REPLACE/WITH NORECOVERY备份数据库:backu ...
- 基于django的个人博客网站建立（六）
基于django的个人博客网站建立(六) 前言 今天主要完成的是项目在腾讯云服务器上ubuntu16.04+django+mysql+uwsig+nginx的部署过程网站效果可点击这里访问 主要内容 ...
- Nginx + FastCGI + Django在windows上部署及nginx常用命令
一般应用都是部署在linux系统上,不会在windows上部署,emmm..所以有兴趣的就瞧瞧吧哈哈 nginx工作原理: nginx用于处理静态文件,动态部分经由fastcgi .scgi或uWSG ...
- 2019-2020-1 20199305《Linux内核原理与分析》第九周作业
进程的切换和一般执行过程 (一)进程调度的时机 (1)关键问题 何为进程切换?就是进程调度时机到来时从就绪进程队列中能够挑选一个进程执行,占用CPU时间,那么就有两个关键问题:一是什么时间去挑选一个就 ...
- 从零开始学习java一般需要多长时间？
从零开始学习java一般需要多长时间? 其实学java一般要多久?因人而异,例如一个零基础的小白自学java,每天学习8个小时来算,而且在有学习资料的基础上,每天学习,从零到找到工作,起码要半年起步, ...
- java1.8 ConcurrentHashMap 详细理解
基于 jdk1.8 Java并发包中提供的一个线程安全且高效的HashMap实现,可以完全替代HashTable,在并发编程的场景中使用频率非常之高.可能大多人只是知道它使用了多个锁代替HashTab ...
- 如何以管理员方式打开VS
第一种 打开VS快捷方式的属性对话框. 勾选"用管理员身份运行" 但是这种方式只有在点击快捷方式直接打开vs时是一管理员身份启动的,也就是如果直接打开Solution,则不是管理员 ...
- python强大的绘图模块matplotlib示例讲解
Matplotlib 是 Python 的绘图库.作为程序员,经常需要进行绘图,在我自己的工作中,如果需要绘图,一般都是将数据导入到excel中,然后通过excel生成图表,这样操作起来还是比较繁琐的 ...
- ES6 -箭头函数 ，对象的函数解构
ES6 -箭头函数: //es6 中的箭头函数和扩展 //es5的写法 // function add(a,b){ // return a + b; // } // add(1,2); //3 fun ...