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的更多相关文章
随机推荐
- HDU2899Strange fuction（二分/三分）
传送门 题目大意:求 F(x) = 6 * x^7+8*x^6+7*x^3+5*x^2-y*x (0 <= x <=100):的最小值 题解:求个导,二分导函数零点,就是原函数最小值所在的 ...
- 使用layer.msg 时间设置不起作用
前几天使用layer.msg设置时间后发现不起作用,这里记录一下. 开始出错误的代码: 后面查看文档后得知调用layer.msg后如果有后续操作需要写在function()中: //eg1 layer ...
- 【前端知识体系-NodeJS相关】对于EventLoop（事件轮询）机制你到底了解多少？
EventLoop 1. EventLoop的执行流程图 ┌───────────────────────┐ ┌─>│ timers │<----- 执行 setTimeout().set ...
- onunload事件不触发的探索
如果现有一需求:浏览器页面关闭时弹出一个对话框,询问是否要退出,应该怎么做呢? 可用onunload事件来实现,该事件会在刷新和关闭页面时执行 我用如下3种方法绑定该事件,但所有主流浏览器都无法 ...
- linux服务器上配置进行kaggle比赛的深度学习tensorflow keras环境详细教程
本文首发于个人博客https://kezunlin.me/post/6b505d27/,欢迎阅读最新内容! full guide tutorial to install and configure d ...
- Java队列和定时器Timer
一: Queue详解 Queue: 基本上,一个队列就是一个先入先出(FIFO)的数据结构 Queue接口与List.Set同一级别,都是继承了Collection接口.Linked ...
- 利用shell脚本快速定位日志
我们平时查日志,在测试环境,日志文件只有几个的情况下,我们可以通过找时间接近的文件然后根据关键词定位报错位置,大不了都查一遍,这都可以忍受.但是在实际的生产环境下,服务器集群部署,每天的日志非常多非常 ...
- ASP.NET Core Identity 的示例
1. appsettings.json { "ConnectionStrings": { "DefaultConnection": "Server=( ...
- Jenkins 有关 Maven 的内容
Jenkins Maven 插件安装 在安装完 Jenkins 后,我们想添加新的项目 为 Maven 项目时,发现找不到这个选项. 原因是我们没有安装插件 Maven Integration. 在 ...
- SpringBoot2使用Jetty容器（替换默认Tomcat）
https://blog.csdn.net/hanchao5272/article/details/99649252 Jetty和tomcat的比较 Tomcat和Jetty都是一种Servlet ...