day 69作业
"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、有以下广告数据（实际数据命名可以略做调整）
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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: grey;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20%;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div class="wrap">
<button @click="ad_arr = ad_data.tv">电视</button>
<button @click="ad_arr = ad_data.phone">手机</button>
<local-tag v-for="ad in ad_arr" :ad="ad"></local-tag>
</div>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
props: ['ad'],
template: `
<div class="box">
<img :src="ad.img" alt="">
<h2>{{ ad.title }}</h2>
</div>
`
};
ad_data = {
tv: [
{img: 'img1/tv/001.jpg', title: 'tv1'},
{img: 'img1/tv/002.jpg', title: 'tv2'},
{img: 'img1/tv/003.jpg', title: 'tv3'},
{img: 'img1/tv/004.jpg', title: 'tv4'},
],
phone: [
{img: 'img1/phone/001.jpg', title: 'phone1'},
{img: 'img1/phone/002.jpg', title: 'phone2'},
{img: 'img1/phone/003.jpg', title: 'phone3'},
{img: 'img1/phone/004.jpg', title: 'phone4'},
]
};
new Vue({
el: '#d1',
data: {
ad_data,
ad_arr: '',
},
components: {
localTag
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业2</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: grey;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div class="wrap">
<p>
<button @click="ad_arr=ad_data.tv; v1='当前未选择任何商品'">电视</button>
<button @click="ad_arr=ad_data.phone; v1='当前未选择任何商品'">手机</button>
</p>
<local-tag v-for="ad in ad_arr" :ad="ad" @action="actionFn"></local-tag>
</div>
<h2>{{ v1 }}</h2>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
props: ['ad'],
template: `
<div class="box" @click="clickFn">
<img :src="ad.img" alt="">
<h2>{{ ad.title }}</h2>
</div>
`,
data() {
return {
ad_title: '',
}
},
methods: {
clickFn() {
this.$emit('action', this.ad.title)
}
}
};
ad_data = {
tv: [
{img: 'img1/tv/001.jpg', title: 'tv1'},
{img: 'img1/tv/002.jpg', title: 'tv2'},
{img: 'img1/tv/003.jpg', title: 'tv3'},
{img: 'img1/tv/004.jpg', title: 'tv4'},
],
phone: [
{img: 'img1/phone/001.jpg', title: 'phone1'},
{img: 'img1/phone/002.jpg', title: 'phone2'},
{img: 'img1/phone/003.jpg', title: 'phone3'},
{img: 'img1/phone/004.jpg', title: 'phone4'},
]
};
new Vue({
el: '#d1',
data: {
ad_data,
ad_arr: '',
v1: '当前未选择任何广告',
},
components: {
localTag
},
methods: {
actionFn(ad_title) {
this.v1 = ad_title + '被选中';
}
}
})
</script>
</body>
</html>
day 69作业的更多相关文章
- 2016福州大学软件工程Beta阶段团队作业成绩汇总
1.评分规则 本次Beta阶段团队作业评分方法如下: 团队得分=[[7次scrum过程评分+(小组互评得分+教师评分)/2]/2],其中过程.小组.教师各30分 说明:由于没有规定提交团队贡献比,因此 ...
- SQL SERVER 中如何用脚本管理作业
在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI界面管理作业要高效.简洁.打个简单的比方,如果你要查看作业的运行时长,如果用UI界面查看,100个作业,你就得在历史记录里面至少查 ...
- C语言程序设计第4堂作业
大家注意:本次作业稍有增加,由于放假期间大家空闲时间比较充足,将之前学习过程中遗留的问题必须在假期解决. 本次课学习主要内容: 分支结构中的二分支结构.多分支结构和else-if语句 掌握字符型数 ...
- 作业成绩 final-review 20161201-1203 15:05
final-review阶段,20161201-20161203 15:05 final 评论II截止 20161204 09:00 申诉截止时间 20161207 12:00,微信联系杨贵福. 凡描 ...
- 作业成绩 final 20161124-1201 09:00
final阶段,20161124-1201 09:00. 申诉截止时间 20161206 12:00,微信联系杨贵福. 凡描述需求或BUG时,应给出以下4项: 你期待看到的现象如何 你实际看到的现象 ...
- Hadoop作业提交之TaskTracker获取Task
[Hadoop代码笔记]Hadoop作业提交之TaskTracker获取Task 一.概要描述 在上上一篇博文和上一篇博文中分别描述了jobTracker和其服务(功能)模块初始化完成后,接收JobC ...
- 【集美大学1411_助教博客】团队作业1——团队展示&选题 成绩
第一次团队作业已经新鲜出炉啦,各位同学请查收.截止日期前,全班都按时提交了作业,而且有的团队还提交了两次呢,下次不要这样啦~ 题目 团队作业1--团队展示&选题 回顾 个人作业1--四则运算题 ...
- 【1414软工助教】团队作业2——需求分析&原型设计 得分榜
题目 团队作业2--需求分析&原型设计 作业提交情况情况 本次作业所有团队都按时提交作业. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 ...
- 【集美大学1411_助教博客】团队作业3——需求改进&系统设计 成绩
看到同学们越来越认真了,助教非常高兴.大家已经开始了alpha冲刺,请控制好进度.成功的关键就是不断迭代,不断迭代. 关于leangoo 我看到所有组的同学都已经开始使用leangoo,请大家把助教加 ...
随机推荐
- Java编译期与运行期
编译期:是指把源码交给编译器编译成计算机可以执行的文件的过程.在Java中也就是把Java代码编成class文件的过程.编译期只是做了一些翻译功能,并没有把代码放在内存中运行起来,而只是把代码当成文本 ...
- 20191003 「HZOJ NOIP2019 Round #8」20191003模拟
综述 试题为常州集训2019SCDay2 得分\(100+30(0)+28\) 时之终结 问题描述 HZOJ1310 题解 构造题. 发现部分分有一档是 \(Y\) 是 \(2^x\) ,于是自然想到 ...
- ESA2GJK1DH1K升级篇: 快速的移植升级程序到自己的项目(BootLoader程序制作)
前言 此代码兼容STM32F103全系列 为避免添加上升级程序造成内存不足,请使用128KB Flash及其以上的型号 这篇文章是为了能够让大家快速移植我的升级模板程序到自己的项目 BootLoade ...
- [LeetCode] 230. Kth Smallest Element in a BST 二叉搜索树中的第K小的元素
Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...
- Sentinel: 接入控制台实时查看监控数据
Sentinel 提供一个轻量级的开源控制台,它提供机器发现以及健康情况管理.监控(单机和集群),规则管理和推送的功能. 比如我们之前是直接在代码中初始限流的值,接入控制台后可以直接通过控制台进行限流 ...
- oracle--PMON
一,PMON功能 a) 监控其他非核心后台进程,如果其他非核心后台进程意外终止,则由 它重启: b) 清洁意外终止的死链接在后天残留的垃圾:将其修改的数据回退,释 放锁: pmon会不断给每个连接发包 ...
- Vertica性能分析
Vertica的特点简单的说可以总结为:列存储.MPP架构.技术比较新.列存储本身带来了数据高度压缩的便利,MPP架构使得可以用相对廉价的PC级服务器横向扩展到较大规模(PB级),05年才问世使得它在 ...
- 从图(Graph)到图卷积(Graph Convolution)：漫谈图神经网络模型 (三)
本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...
- App启动时间分析
iOS应用的启动可分为pre-main阶段和main()阶段. 1.pre-main阶段 可以通过配置Scheme,设置DYLD_PRINT_STATISTICS为1,来打印pre-main阶段的时间 ...
- 五年微软DevOps MVP （也称TFS MVP）
笔者有幸第五次被微软授予MVP称号,高兴之余,在这里简单的介绍一下MVP的基本情况: 谁是 MVP? Microsoft 最有价值专家 (MVP) 是热情地与社区分享知识的技术专家.他们总是处于&qu ...