"""
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="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1 @click="f1">电视</h1>
<h1 @click="f2">手机</h1>
<div style="display:table;content:'';line-height:0;">
<local-tv v-for="e in tv" :tv="e" v-if="tv_num==='tv_num'" @tvf="tvf"></local-tv>
<hr>
<local-phone v-for="e in phone" :phone="e" v-if="phone_num==='phone_num'" @phonef="phonef"></local-phone>
</div>
<h2>{{ gg }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
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'},
]
}
let localTv = {
props: ['tv'],
template: `<div class="box" @click="f1">
<img :src="tv.img" alt="" style="height: 200px;height: 200px">
<h2>{{ tv.title }}</h2>
</div>`,
methods:{
f1(){
this.$emit('tvf',this.tv.title)
}
}
};
let localPhone = {
props: ['phone'],
template: `<div class="box" @click="f1">
<img :src="phone.img" alt="" style="height: 200px;height: 200px">
<h2>{{ phone.title }}</h2>
</div>`,
methods:{
f1(){
this.$emit('phonef',this.phone.title)
}
}
};
new Vue({
el: '#app',
data: {
tv: ad_data.tv,
phone: ad_data.phone,
tv_num: '',
phone_num: '',
gg: '未选择任何广告'
},
methods: {
f1() {
this.tv_num = 'tv_num'
},
f2() {
this.phone_num = 'phone_num'
},
tvf(a){
this.gg=a+'被选中了'
},
phonef(a){
this.gg=a+'被选中了'
}
},
components: {
localTv,
localPhone
}
})
</script>
</html>
