day67test
作业
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="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: calc(200px * 4 + 80px);
margin: 0 auto;
user-select: none;
}
.box {
width: 200px;
height:260px;
background-color: rgba(10,200,30,0.5);
border-radius: 10px;
float: left;
margin: 10px;
overflow: hidden;
}
.box img {
height: 160px;
margin: 0 auto;
display: block;
}
.box p {
text-align: center;
}
.action {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<p>
<button class="{action :role ==='tv'}" @click="show('tv')">点击展示电视</button>
<button class="{action :role ==='phone'}" @click="show('phone')">点击展示手机</button>
</p>
<div v-if="role === 'tv'">
<tag v-for="(tv,i) in tv" :data="tv" :index="i" @f1="choice"></tag>
</div>
<div v-else-if="role === 'phone'">
<tag v-for="(phone,i) in phone" :data="phone" :index="i" @f1="choice"> </tag>
</div>
</div>
<div>
<h2>{{ msg }}</h2>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tv = [
{img: 'img/tv/001.jpg', title: 'tv1'},
{img: 'img/tv/002.jpg', title: 'tv2'},
{img: 'img/tv/003.jpg', title: 'tv3'},
{img: 'img/tv/004.jpg', title: 'tv4'},
];
let phone = [
{img: 'img/phone/001.jpg', title: 'phone1'},
{img: 'img/phone/002.jpg', title: 'phone2'},
{img: 'img/phone/003.jpg', title: 'phone3'},
{img: 'img/phone/004.jpg', title: 'phone4'},
];
let tag = {
props:['data','index'],
template:`
<div class="box" @click="fn">
<p>
<b>{{ data.title}}</b>
</p>
<img :src="data.img" alt="">
</div>
`,
methods:{
fn(){
this.$emit('f1',this.index);
}
}
};
new Vue({
el: '#app',
data: {
tv,
phone,
role:'tv',
msg:'未选中任何广告',
},
components:{
tag,
},
methods:{
show(role){
this.role=role;
},
choice(index){
let obj = this.role ==='tv' ? this.tv :this.phone;
this.msg = obj ? obj[index]['title']+'被选中' :this.msg;
},
}
});
</script>
</html>
day67test的更多相关文章
随机推荐
- POJ-1976-A Mini Locomotive-dp
A train has a locomotive that pulls the train with its many passenger coaches. If the locomotive bre ...
- java_缓冲流(字符输出输入流)
/** java.io.BufferedReader extends Reader * * 构造方法: * BufferedReader(Reader in):创建一个使用默认大小输入缓冲区的缓冲字符 ...
- MVVM test
示例代码 public class RegisterUserViewModel { public UserInfo userInfo { get; set; } public ICommand Cli ...
- [JZOJ1320] 【Usaco2009 gold 】拯救奶牛
题目 题目大意 一个三角形的网格图,三角形与其有共同边的三角形相连. 起点到所有终点的最短距离. 思考历程 数据看起来还挺大的,所以不是什么图论算法. 这显然是一个结论题. 什么结论? 然后我就开始推 ...
- 「题解」：[BZOJ4558]方
问题: 方 时间限制: 2 Sec 内存限制: 256 MB 题面 题目描述 上帝说,不要圆,要方,于是便有了这道题.由于我们应该方,而且最好能够尽量方,所以上帝派我们来找正方形 上帝把我们派到了一 ...
- golang和python的二进制转换
1.二进制转换规则 比如13,对13整除2,余数1,整除变为6,依次类推 13/2=6余1 6/2=3余0 3/2=1余1 1/2=0余1 所以最后的结果为1101 2.python def conv ...
- Docker系列(十一)：Kubernetes集群集群部署实践
Kubernetes分布式集群架构 服务注册和服务发现问题怎么解决的? 分布式通讯的核心就是ip加端口 每个服务分配一个不变的虚拟IP+端口 系统env环境变量里有每个服务的服务名称到IP的映射 如下 ...
- java 调用区块链 发布和调用智能合约
java连接区块链 很简单 ,调用智能合约要麻烦一些. 先说连接 区块链查询数据. 1 maven 项目导入 web3j 的依赖. <dependency> <groupId> ...
- Matlab系列作业
(2019年2月19日注:Matlab这门课是在我大四上学期经历的,那时候开这篇文章是为了记录学习Matlab的时候遇到的坑,所以将所有的作业题合并到一篇文章中) 1.创建一个10*10的矩阵,矩阵所 ...
- momentjs 使用总结
一.安装 cnpm install moment 二.引入 var moment = require('moment') 三.使用 let today = moment().format('YYYY- ...