电视手机
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 880px;
margin: 0 auto;
user-select: none;
}
.box {
width: 200px;
border-radius: 10px;
float: left;
margin: 10px;
overflow: hidden;
}
.box img {
height: 180px;
margin: 0 auto;
display: block;
}
.box p {
text-align: center;
}
.action{
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<p>
<button :class="{action: role === 'tv'}" @click="show('tv')">电视</button>
<button :class="{action: role === 'phone'}" @click="show('phone')">手机</button>
</p>
<div v-if="role === 'tv'">
<tag v-for="(tv, i) in tv" :data="tv" :index="i" @f1="choice"></tag>
</div>
<div v-else-if="role === 'phone'">
<tag v-for="(phone, i) in phone" :data="phone" :index="i" @f1="choice"></tag>
</div>
</div>
<div>
<h2>{{ msg }}</h2>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let 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'},
];
let 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 tag = {
props: ['data', 'index'],
template: `
<div class="box" @click="fn">
<p>
<b>{{ data.title }}</b>
</p>
<img :src="data.img" alt="">
</div>
`,
methods: {
fn(){
this.$emit('f1', this.index);
}
}
};
new Vue({
el: '#app',
data: {
tv,
phone,
role: 'phone',
msg: '未选中任何广告',
},
components: {
tag,
},
methods: {
show(role) {
this.role = role;
},
choice(index) {
let obj = this.role==='tv'? this.tv : this.phone;
this.msg = obj ? obj[index]['title'] +'被选中' : this.msg;
},
}
});
</script>
</html>
