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的更多相关文章
随机推荐
- Vuex听说很难？
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化. 什么鬼东西 看完这段 ...
- vuex的简单介绍
.vuex的定义 )Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,使用插件的形式引进项目中 )集中存储和管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
- Daemon 守护线程(27-11)
t2.setDaemon(True)不再等待里面的sleep(5). 当设成setDaemon(True)这个线程就不等了. 例子一: import threadingfrom time import ...
- MFC注册热键
注册热键. 当用户点击注册的快捷键时,做出相应的响应. 定义 ALT+M键为测量按钮响应函数: 头文件中定义: #define ID_HOTKEY1 10001 在初始化函数中加入注册热键函数: if ...
- Educational Codeforces Round49
A Palindromic Twist(字符串) 问每个字母必须向左或向右变成另一个字母,问能不能构成回文 #include <iostream> #include <string. ...
- 如何在 Apache Flink 中使用 Python API？
本文根据 Apache Flink 系列直播课程整理而成,由 Apache Flink PMC,阿里巴巴高级技术专家 孙金城 分享.重点为大家介绍 Flink Python API 的现状及未来规划, ...
- Python-进程(1)
目录 操作系统发展史 穿孔卡片 联机批处理系统 统计批处理系统 单道 多道技术 空间上复用 时间上复用 并行与并发 进程 程序与进程 进程调度 进程的三个状态 就绪态 运行态 阻塞态 同步和异步 阻塞 ...
- SQLite C++操作种
SQLite C++操作类 为了方便SQLite的使用,封装了一个SQLite的C++类,同时支持ANSI 和UNICODE编码.代码如下: 头文件(SQLite.h) /************ ...
- python 编程 一次错误记录 -1073740791
原因是发生在我错把类当做实例化对象使用了
- （转）第02节：在Canvas上画简单的图形
我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...