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,请大家把助教加 ...
随机推荐
- IP、MAC和端口号（六）
在茫茫的互联网海洋中,要找到一台计算机非常不容易,有三个要素必须具备,它们分别是 IP 地址.MAC 地址和端口号. 一.IP地址 IP地址是 Internet Protocol Address 的缩 ...
- USACO Agri-Net
洛谷 P1546 最短网络 Agri-Net https://www.luogu.org/problemnew/show/P1546 JDOJ 1696: Agri-Net https://neooj ...
- LG2530 「SHOI2001」化工厂装箱员 高维DP+记忆化搜索
问题描述 LG2530 题解 设\(opt[i][a][b][c][d]\)代表装到第\(i\)个后,第\(1,2,3\)手上分别还剩\(a,b,c\)个的最小操作数. 记忆化搜索即可. 启示:如果状 ...
- bdd框架之lettuce
安装 执行 :lettuce (需要在特定的文件夹下) 结果指定到文件中
- .NET三种异步模式（APM、EAP、TAP）
APM模式: .net 1.0时期就提出的一种异步模式,并且基于IAsyncResult接口实现BeginXXX和EndXXX类似的方法. .net中有很多类实现了该模式(比如HttpWebReque ...
- [LeetCode] 139. Word Break 拆分词句
Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, determine ...
- [HDU4867]Xor (线段树分治+类数位dp)
[HDU4867]Xor (线段树分治+类数位dp) 提供一种\((m+n) log a log m\)带有常数约\(\frac{1}{log n}\)的算法 处理询问,将后来加入的数算进序列中,则每 ...
- EFCore代码实践
参考:https://www.cnblogs.com/Wddpct/p/6835574.html 控制台程序依赖注入参考:https://www.cnblogs.com/Wddpct/p/721920 ...
- Docker下构建centos7容器无法使用systemctl命令的解决办法
最近在使用docker 构建centos7 容器时,发现无法使用systemctl 命令.后来万能的百度解决了问题,随记之以备后用. 解决办法: docker run --privileged -it ...
- ASPNETCore开源日志面板 ：LogDashboard
LogDashboard logdashboard是在github上开源的aspnetcore项目, 它旨在帮助开发人员排查项目运行中出现错误时快速查看日志排查问题 通常我们会在项目中使用nlog.l ...