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的更多相关文章
随机推荐
- Day 6:集合（set）
集合(set)定义:由不同元素组成的集合,集合中是一组无序排列的可hash值,可以作为字典的key特性:集合里面数据类型是不可变的1.可变的数据类型:列表,字典2.不可变的数据类型:数字.元组.字符串 ...
- element表单验证
rules: { name:[{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 5, message: '长度 ...
- LeetCode 8.字符串转换整数 (atoi)（Python3）
题目: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该 ...
- oi知识表
- SPOJ10707 COT2-Count on a tree II
COT2 - Count on a tree II 中文题意 离线询问一颗树上路径(u,v)中经过所有点的权值的种类数. 题解 树上莫队.即在树的欧拉序列上进行莫队.同一个点加第一次时增加,第二次时减 ...
- node中没有全局作用域，只有模块作用域（文件作用域）
node中没有全局作用域,只有模块作用域(文件作用域)
- 01.MyBatis快速入门
1.下载jar包 Mybatis包+数据库驱动包 https://github.com/mybatis/mybatis-3/releases 2.新建Java工程并导入jar包 3.创建数据库与表 C ...
- CentOS7配置Docker镜像加速器
1. 将默认的配置文件复制出来 cp -n /lib/systemd/system/docker.service /etc/systemd/system/docker.service 2. 将加速器地 ...
- C++构造与析构函数中调用虚函数的问题
前些天想把以前写的内存池算法重写一遍,跨平台是第一目标,当时突发奇想,因为不愿意做成一大堆#if..#end,所以想利用C++的多态性,但是怎么让内存池完好退出却没想到自认为完美的方案.但是一个很偶然 ...
- React项目开发经验汇总
博客来源 小寒的博客 定义好全局配置信息 环境变量不要提取出来,配置信息提取出来 UI样式变量 定义好变量的作用不用多说 样式库建设 工具样式,复用性强的样式,这些class成为会是真个网站样式的 ...