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'},
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: darkgrey;
float: left;
margin: 10px;
}
.box img {
width: 200px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<h2 @click="t1">电视</h2>
<h2 @click="p1">手机</h2>
<div class="wrap" v-if="t">
<my-tv v-for="tv in ad_data.tv" :img="tv.img" :title="tv.title"></my-tv>
</div>
<hr>
<div class="wrap" v-if="p">
<my-phone v-for="ph in ad_data.phone" :img="ph.img" :title="ph.title"></my-phone>
</div>
</div>
</body>
<script src="vue/vue.min.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 myTv = {
props: ['img', 'title'],
template: `
<div class="box">
<img :src="img" alt="">
<h3>{{ title }}</h3>
</div>
`,
};
let myPhone = {
props: ['img', 'title'],
template: `
<div class="box">
<img :src="img" alt="">
<h3>{{ title }}</h3>
</div>
`,
};
new Vue({
el: '#app',
data: {
t: '',
p: '',
},
components: {
myTv,
myPhone
},
methods: {
t1() {
this.t = 1
},
p1() {
this.p = 1
},
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: darkgrey;
float: left;
margin: 10px;
}
.box img {
width: 200px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<h2 @click="t1">电视</h2>
<h2 @click="p1">手机</h2>
<div class="wrap" v-if="t">
<my-tv v-for="tv in ad_data.tv" :img="tv.img" :title="tv.title" @tvd="tvd"></my-tv>
</div>
<hr>
<div class="wrap" v-if="p">
<my-phone v-for="ph in ad_data.phone" :img="ph.img" :title="ph.title" @phd="phd"></my-phone>
</div>
<h2 style="text-align: center">{{ h2 }}</h2>
</div>
</body>
<script src="vue/vue.min.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 myTv = {
props: ['img', 'title'],
template: `
<div class="box" @click="tt1">
<img :src="img" alt="">
<h3>{{ title }}</h3>
</div>
`,
methods: {
tt1() {
this.$emit('tvd', this.title)
}
}
};
let myPhone = {
props: ['img', 'title'],
template: `
<div class="box" @click="phh">
<img :src="img" alt="">
<h3>{{ title }}</h3>
</div>
`,
methods: {
phh() {
this.$emit('phd', this.title)
}
}
};
new Vue({
el: '#app',
data: {
t: '',
p: '',
h2: '未选中任何广告'
},
components: {
myTv,
myPhone
},
methods: {
t1() {
this.t = 1
},
p1() {
this.p = 1
},
tvd(a) {
this.h2 = a
},
phd(a) {
this.h2 = a
}
}
})
</script>
</html>
