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,请大家把助教加 ...
随机推荐
- Redis面试题（46题）
1.什么是Redis?简述它的优缺点? Redis 的全称是:Remote Dictionary.Server,本质上是一个 Key-Value 类型的内存数据库,很像memcached,整个数据库统 ...
- Log-Structured Merge Tree (LSM Tree)
一种树,适合于写多读少的场景.主要是利用了延迟更新.批量写.顺序写磁盘(磁盘sequence access比random access快). 背景 回顾数据存储的两个“极端”发展方向 加快读:加索引( ...
- [LeetCode] 152. Maximum Product Subarray 求最大子数组乘积
Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...
- [LeetCode] 208. Implement Trie (Prefix Tree) 实现字典树(前缀树)
Implement a trie with insert, search, and startsWith methods. Example: Trie trie = new Trie(); trie. ...
- it's over | 2019 CSP-S 第二轮认证（超长预警）
也许应该从Day -1(2019年11月14日周四)开始说起? 卑微的我们在学长的怂恿下终于...停课了(哇我们太菜了,只停一天半的课有个卵用 早读后我带头去办公室请假,飞哥很大方地答应了,同时免了我 ...
- [转载]3.1 UiPath鼠标操作元素的介绍和使用
一.鼠标(mouse)操作的介绍 模拟用户使用鼠标操作的一种行为,例如单击,双击,悬浮.根据作用对象的不同我们可以分为对元素的操作.对文本的操作和对图像的操作 二.鼠标对元素的操作在UiPath中的使 ...
- [解決方案]IIS配置后报错500.21
如果报错这个信息,那么就是aspnet未注册造成的,需要安装一下 步骤: 1.打开CMD 2.输入cd %windir%\Microsoft.Net\Framework\v4.0.30319 3.执行 ...
- Python 发送企业微信消息
1.获取企业微信信息 1)我的企业 --> 企业信息 --> 企业ID 2)创建一个应用,记录该应用的 AgentId.Secret 2.python代码 #!/usr/bin/env p ...
- POJ 2249 暴力求组合数
Binomial Showdown Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22692 Accepted: 692 ...
- 使用jedis操作redis常用方法
在redis入门及在商城案例中的使用中简单介绍了下使用jedis如何操作redis,但是其实方法是跟redis的操作大部分是相对应的.我这里做下记录 1.String类型操作 public class ...