vue_03day
作业：
vue组件操作页面渲染：
1、有以下广告数据（实际数据命名可以略做调整）
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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
2、在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
组件渲染：
<style>
.c1 {
font-size: 40px;
margin: 10px auto;
text-align: center;
}
.box {
width: 300px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 300px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
.colo {
color: red;
}
.ccc{
font-size: 60px;
margin: 10px auto;
text-align: center;
}
.jjj{
width: 1200px;
margin-left:30px;
}
</style>
</head>
<body>
<div id="app">
<local-tag @qq="qq1" @t1="tl1" :def="ttl" :col="cl" :jj="gg"></local-tag>
<div class="ccc" v-if="gg">{{ gg }}被选中</div>
</div>
<script>
let localTag = {
props: ['obj', 'def', 'col', 'jj'],
template: `
<div>
<div class="c1">
<span @click="cll('tv')" :class="{colo: col == 'tv'}">电视</span>
<span @click="cll('phone')" :class="{colo: col == 'phone'}">手机</span>
<img class="jjj" src="img/part3.jpg" alt="" v-if="!def">
</div>
<div v-for="i in def">
<div class="box" @click="sp(i.title)">
<img :src="i.img" alt="">
<h2 :class="{colo: jj == i.title}">{{ i.title }}</h2>
</div>
</div>
</div>
`,
methods: {
cll(c) {
this.$emit('t1',c)
},
sp(a) {
this.$emit('qq',a)
}
}
};
new Vue({
el: '#app',
data: {
add_data: {
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'},
],
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'},
],
},
cl: '',
ttl: null,
gg:null,
},
methods: {
tl1(c) {
this.cl = c;
this.ttl = this.add_data[c];
this.gg = ''
},
qq1(a){
this.gg = a
}
},
components: {
localTag,
}
})
</script>
vue_03day的更多相关文章
随机推荐
- python做中学（七）ord() 函数
描述 ord() 函数是 chr() 函数(对于8位的ASCII字符串)或 unichr() 函数(对于Unicode对象)的配对函数,它以一个字符(长度为1的字符串)作为参数,返回对应的 ASCII ...
- 【OCR系列之一】字符识别技术总览
最近入坑研究OCR,看了比较多关于OCR的资料,对OCR的前世今生也有了一个比较清晰的了解.所以想写一篇关于OCR技术的综述,对OCR相关的知识点都好好总结一遍,以加深个人理解. 什么是OCR? OC ...
- Linux 安装 MySQL 出现 Could NOT find Curses
通过源码安装 MySQL 数据库,下载了 mysql-5.5.24 的版本,在使用 cmake 时产生了报错,如下: CMake Error at cmake/readline.cmake: (MES ...
- JBoss+eclipes之HelloWorld
网上罕有教程,文档看不太懂.鄙人摸索成功以记之. 创建新的EJB项目:[File]--[New]--[Other]-- [EJB]--[EJB project] 此处可见我的JBoss服务器使用的是W ...
- 基于bert的命名实体识别，pytorch实现，支持中文/英文【源学计划】
声明:为了帮助初学者快速入门和上手,开始源学计划,即通过源代码进行学习.该计划收取少量费用,提供有质量保证的源码,以及详细的使用说明. 第一个项目是基于bert的命名实体识别(name entity ...
- Java电商项目-1.构建数据库,搭建项目环境
目录 到Github获取源码请点击此处 一. 数据库还原 二. Mybatis逆向生成工具的使用 三. 搭建项目环境 四. 在linux虚拟机上部署zookeeper, 搭建Dubbo服务. linu ...
- Python数据分析揭秘知乎大V的小秘密
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 清风小筑 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- ojdbc.jar在maven中报错(下载不了)
一.问题 由于oracle的版权问题,java连接oracle的jar(ojdbc.jar)在maven的中央仓库下载不到,然后导致maven项目报错. 二.解决 第一步:下载ojdbc.jar 由于 ...
- TCP协议如何保证可靠传输？
一.TCP的可靠传输如何保证? 在TCP连接中,数据流必须以正确的顺序传送给对方.TCP的可靠性是通过顺序编号和确认(ACK)实现的.TCP在开始传送一个段时,为准备重传而首先将该段插入到发送队列中, ...
- iOS常用宏定义--实用
在这里给大家分享一些常用的宏定义,喜欢的小伙伴可以直接在项目中使用(持续更新)!为了大家使用方便,请点击GitHub - 宏定义头文件下载 ! 1.获取屏幕宽度与高度 #define SCREEN_W ...