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的更多相关文章
随机推荐
- CSP2019 树上的数 题解
题面 这是一道典型的部分分启发正解的题. 所以我们先来看两个部分分. Part 1 菊花图 这应该是除了暴力以外最好想的一档部分分了. 如上图(节点上的数字已省略),如果我们依次删去边(2)(1)(3 ...
- iOS：捋一遍View的生命周期
一.介绍 前面介绍了VC的生命周期,闲着没事也来捋一捋View的生命周期,简单用两个类型的View来监测.一个View纯代码创建,另一个View使用Xib创建. 二 .代码 MyCodeView: ...
- 【STM32H7教程】第16章 STM32H7必备的HAL库API（重要）
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第16章 STM32H7必备的HAL库API(重要 ...
- bootstrap去除自带15px内边距，去除container 15px padding
壹 ❀ 问题 在使用bootstrap时,由于bootstrap槽宽特性,我们在布局时会发现container以及col-**-**左右都会自带15px的padding,有时候空间不足就想着怎么把b ...
- NumPy 学习 第四篇：数组的基本操作
在数组中,用axis(轴)表示维度,对于三维数组,axis参数的取值通常有: 当axis=None时,表示把数组展开为一维数组: 当axis=0时,表示按照行(第一维)进行计算: 当axis=1时,表 ...
- WDA入门教程Ⅰ：Web Dynpro for ABAP 入门(转）
转自:https://www.jianshu.com/p/68c1592f1a87 WDA全称Web Dynpro for ABAP,也写作WD4A或WDA,是用于在ABAP环境中开发Web应用程序的 ...
- Asp.Net Mvc自定义控件之树形结构数据生成表格 - WPF特工队内部资料
最近项目中有一个需求,将树形结构的数据,以表格的形式展示在页面中,下图是最终呈现效果: 源码: @{ Layout = null; } <!DOCTYPE html> <html&g ...
- Linux网络——查看网络连接情况的命令
Linux网络——查看网络连接情况的命令 摘要:本文主要学习了Linux中用来查看网络连接情况的命令. hostname命令 hostname命令用于显示和设置系统的主机名称,设置只是临时生效,永久生 ...
- 怎么将PDF转换成DWG?试试这两种方法
在CAD中,PDF文件也是比较常见的.PDF文件可以更好的预览图纸.但是需要对图纸的内容进行编辑的时候,PDF文件就要进行格式的转换才能够编辑.那怎么将PDF文件转换为DWG格式呢?具体要怎么来进行转 ...
- JVM 参数配置
JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xmn512m -Xss256k -XX:PermSize=256m -XX:MaxPermSize=256m ...