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,请大家把助教加 ...
随机推荐
- Eclipse的server选项卡中找不到tomcat配置项
1.在Eclipse中,如果想开发j2ee,必须要先安装插件.至于具体的插件安装方法,这里不再赘述. 2.当进行到配置tomcat服务器的时候,有时候会出现这种情况: 3.在server选项卡的Run ...
- 图学Kubernetes
所有图片来自:Kubernetes Patterns: Reusable Elements for Designing Cloud-Native Applications 本文图片摘要曾经在某大厂内网 ...
- 【PE512】Sums of totients of powers（欧拉函数）
点此看题面 大致题意: 求\(\sum_{n=1}^{5*10^8}((\sum_{i=1}^n\phi(n^i))(mod\ n+1))\). 大力推式子 单独考虑\((\sum_{i=1}^n\p ...
- IDEA中SonarLint的安装与使用
一.SonarLint插件的安装 1.1在线安装 (1)在IDEA菜单栏选择File->Settings,左边栏选择Plugins (2)在线安装选择Browse repositories,搜索 ...
- SpringBoot使用token简单鉴权
本文使用SpringBoot结合Redis进行简单的token鉴权. 1.简介 刚刚换了公司,所以最近有些忙碌,所以一直没有什么产出,最近朋友问我登录相关的,所以这里先写一篇简单使用token鉴权的文 ...
- vue+elementui搭建后台管理界面(1登录)
1 node环境安装 从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...
- 【ztree】回显选中节点
// treeId是元素id,array是数据数组 var ztree = $.fn.zTree.init($("#treeId"), setting, array); // 获取 ...
- 关于i7 8700以上系列主机，安装虚拟机Win7下连接U盘，故障处理的补充说明
正如前文“虚拟机下怎么连接U盘,如何使用U盘?一策书(湘岳阳万江波)的随笔”所言,我在win10下的虚拟机win7(i7 9700),而且听说了是不支持Win7的,其原因是不支持USB的驱动问题. 我 ...
- pymysql模块常用操作
pymysql安装 pip install pymysql 链接数据库.执行sql.关闭连接 import pymysql user = input('请输入用户名请输入密码:').strip() p ...
- git账户配置
一.生成github的ssh key ssh-keygen ssh-keygen -t rsa -f ~/.ssh/zzf073_rsa -C zzf073@163.com 二.配置账户公钥 1.查看 ...