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的更多相关文章
随机推荐
- 修改本地的host文件
在C:\Windows\System32\drivers\etc下有一个host文件, 在里面可以修改本地的域名,比如我文件里添加一行: 10.0.33.79 devsuite.easthope ...
- 11-Django站点管理
站点管理 内容发布的部分由网站的管理员负责,包括查看.添加.修改.删除数据 开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地生成管理模块 在Django ...
- MyEclipse构建maven项目报错
直接上图: 这里有三种方案: 1.检查jdk版本:最好换成1.8版本 项目右键-->build path-->configure build Path; 1.2 点击 libraries ...
- bootstrap 输入框后面有个按钮
效果如下: 实现代码:
- C++值类别, move, perfect forward
推荐看链接顺序看,第一个链接很好地讲述了值类别地特性,图形很好理解.第二个链接介绍常见值类别的示例,帮助熟悉.第三个链接是第二个链接的补充,让你理解为什么需要std::move以及perfect fo ...
- gitlab的安装配置与简单使用
安装 gitlab,建议系统内存 6G ,不然会报错. 一.如何安装 gitlab 下载 gitlab 的 RPM 包 https://packages.gitlab.com/gitlab/gitla ...
- c# winform 窗体失去焦点关闭（钩子实现）
先来一个辅助类 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Inte ...
- Java的23种设计模式，详细讲解（二）
本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...
- 史上最详细JVM，Java内存区域讲解
本人免费整理了Java高级资料,一共30G,需要自己领取:传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 运行时数据区域 JVM载执行Jav ...
- newSingleThreadScheduledExecutor连续关闭造成 java.util.concurrent.RejectedExecutionException
Exception in thread "main" java.util.concurrent.RejectedExecutionException: Task java.util ...