作业
"""
1、按照上方 知识点总结 模块,总结今天所学知识点;
2、有以下广告数据(实际数据命名可以略做调整)
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) 一个字典作为一个显示单位,定义一个子组件进行渲染(涉及父子组件传参)
3、在第2题基础上,页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)
i)当没有点击任何广告,h2 标签显示:未选中任何广告
ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中
"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue/vue.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<title>子组件</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.c1{
width: 50px;
height: 120px;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<p><h3 class="btn btn-primary" @click="hclick('tv')">{{ tv1 }}</h3></p>
<p><h3 class="btn btn-primary" @click="hclick('phone')">{{ ph1 }}</h3></p>
<local-tag v-for="(v,i) in addata" :img_obj="addata" :ind="i" :title="title"></local-tag>
</div>
</div>
</body>
<script src="vue/vue.min.js"></script>
<script>
// 声明局部组件:局部组件要在其父组件中注册才能使用
// 1、声明组件 2、注册组件 3、渲染组件 => 全局组件不需要注册
let localTag = {
props:['img_obj','ind','title'],
template: `
<div class="box" @click="fn">
<h3 align="center">{{ img_obj[ind].title }}</h3>
<img :src=" img_obj[ind].img " alt="" class="c1" @click="img_click(img_obj[ind].title),ind">
<h3 align="center" v-if="img_obj[ind].title === c_title ">{{ message }}</h3>
</div>
`,
data(){
return {
message:'',
c_title:'',
}
},
methods: {
fn() {
console.log(this)
},
img_click(title,ind){
this.c_title = title;
this.message = '已选中'+ title
}
},
};
new Vue({
el: '#app',
data: {
tv1:'电视',
ph1:'手机',
ad_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/1.jpg', title: 'phone1'},
{img: 'img/phone/2.jpg', title: 'phone2'},
{img: 'img/phone/3.jpg', title: 'phone3'},
{img: 'img/phone/4.jpg', title: 'phone4'},
]
},
addata:'',
title:'',
},
methods:{
hclick(a){
if (a === 'tv'){
this.title = 'tv';
this.addata = this.ad_data.tv;
}else if(a === 'phone'){
this.title = 'phone';
this.addata = this.ad_data.phone;
}
}
},
components: { // 注册组件
localTag,
}
});
</script>
</html>