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的更多相关文章
随机推荐
- SpringCloud学习笔记（六）：Feign+Ribbon负载均衡
简介 官网解释: http://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign Feign是一个声明式WebS ...
- IIR滤波器数字频带转换
<DSP using MATLAB>(Ingle & John Proakis)3ed,书中表8.2似乎不对. <Discrete Time signal processin ...
- java获取服务器路径
java获取服务器一些信息的方法(服务器地址/相对路径/端口/项目名字 request.getServletContext().getRealPath("/") 获取项目所在服务 ...
- 5.1_Spring Boot2.x安装Docker
1.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术: Docker 是一个开源的应用容器引擎,基于Go 语言并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用 ...
- POJ - 3294~Relevant Phrases of Annihilation SPOJ - PHRASES~Substrings POJ - 1226~POJ - 3450 ~ POJ - 3080 (后缀数组求解多个串的公共字串问题)
多个字符串的相关问题 这类问题的一个常用做法是,先将所有的字符串连接起来, 然后求后缀数组 和 height 数组,再利用 height 数组进行求解. 这中间可能需要二分答案. POJ - 3294 ...
- java开发系列-服务器tomcat
概述 tomcat是Apache组织提供的,中小型的免费的支持Servlet和JSP规范的服务器. tomcat安装配置 下载 官方下载地址 下载,绿色版直接解压到指定目录就好. 启动Tomcat 双 ...
- COGITATE | 分析当前热门软件的创新
热门软件分析实例一——Github [简介] gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub.作为一个分布式的版本控制系统,在Gi ...
- 编写Map处理逻辑
- CodeForces 258D Little Elephant and Broken Sorting(期望)
CF258D Little Elephant and Broken Sorting 题意 题意翻译 有一个\(1\sim n\)的排列,会进行\(m\)次操作,操作为交换\(a,b\).每次操作都有\ ...
- 74CMS漏洞打包(从老博客转)
引子 这套CMS是上个月中做的审计,总共找到几个后台漏洞,可后台getshell,一个逻辑漏洞可任意发短信,还有一个前台注入漏洞.不过发到了某平台上之后,审核又要求我提交利用的poc,所以懒得发去了, ...