"""
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">
<title>父传子</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
.box h4 {
text-align: center;
font-weight: normal;
font-size: 10px;
}
</style>
</head>
<body>
<div id="app">
<button type="button" value="电视" @click="f1='televation'">电视</button>
<button type="button" value="手机" @click="f1='miphone'">手机</button>
<div>
<div class="wrap" v-if="f1 == 'televation' ">
<local-tag v-for="dog in ad_data.tv" :dog="dog" def="12345" :xyz="dog.title"></local-tag>
</div>
<div class="wrap" v-if="f1 == 'miphone' ">
<local-tag v-for="dog in ad_data.phone" :dog="dog" def="12345" :xyz="dog.title"></local-tag>
</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
let 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/001.jpg', title: 'phone1'},
{img: 'img/phone/002.jpg', title: 'phone2'},
{img: 'img/phone/003.jpg', title: 'phone3'},
{img: 'img/phone/004.jpg', title: 'phone4'},
]
}
let localTag = {
props: ['dog', 'def', 'xyz'],
template: `
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2 v-if="count==1">{{ dog.title }}已被选中</h2>
<h4 v-else>{{ dog.title }}广告未被选中</h4>
<!--<h3>{{ abc }}</h3>-->
<!--<h3>{{ def }}</h3>-->
<!--<h3>{{ xyz }}</h3>-->
</div>
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this.dog);
if(this.count == 1){
this.count = 0
}
else{
this.count = 1
}
}
}
};
new Vue({
el: '#app',
data: {
ad_data,
f1:''
},
components: {
localTag,
},
});
</script>
</html>