vue_03day
2024-09-06 09:03:56
目录
作业:
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>
最新文章
- 我要成为前端工程师!给 JavaScript 新手的建议与学习资源整理
- linux安装maven
- 在利用xampp开发时候为apache设置多个项目目录
- Kerberos安装及使用
- ActiveRecord中andFilterWhere使用
- control file sequential read 等待事件
- 利用Warensoft Stock Service编写高频交易软件
- 移除GridView中的重复项
- linux分区工具fdisk的使用
- hdu1042
- 【转】open参数O_DIRECT的学习
- python+eclipse+pydev开发环境搭建
- MySQL删除foreign key_ERROR 1025 (HY000): Error on rename of &#39;./test_20180206/cc&#39; to &#39;./test_20180206/#sql2-9ac-e&#39; (errno: 152)
- Linux下MySQL在知道密码的情况下修改密码
- HDU 5514
- 学生成绩管理系统(C++指针、链表、文件及面向对象的运用)
- (笔记)Linux内核学习(一)之内核介绍
- AWS EC2 Root密码重置
- CVPR 2015 papers
- 浅探SpringMVC中HandlerExecutionChain之handler、interceptor
热门文章
- Codeforces Round #594 (Div. 1)
- LeetCode 705:设计哈希集合 Design HashSet
- 导出HTML5 Canvas图片并上传服务器功能
- 愉快地使用Groovy Shell
- 谷歌验证器的原理及JS实现
- MySQL(10)---自定义函数
- C# regular expression to validate email
- 2-How nginx processes a request
- Java生鲜电商平台-你应该保留的一些学习态度与学习方法
- 测试工程师技术tree(“自言自语”)