<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
border-radius: 10px;
overflow: hidden;
}
.box img{
width: 200px;
height: 240px;
}
</style>
<body>
<div id="app01">
<div >
<button @click="choice('tvImg')">电视</button>
<button @click="choice('phoneImg')">手机</button>
<p>{{msg}}</p>
<local v-for="img in imgList" :img="img" @receive="data"></local>
</div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/vue.min.js"></script>
<script>
let picture ={
tvImg: [
{img: 'img/tv1.jpg', title: 'tv1'},
{img: 'img/tv2.jpg', title: 'tv2'},
{img: 'img/tv3.jpg', title: 'tv3'},
{img: 'img/tv4.jpg', title: 'tv4'},
], phoneImg : [
{img: 'img/phone1.jpg', title: 'phone1'},
{img: 'img/phone2.jpg', title: 'phone2'},
{img: 'img/phone3.jpg', title: 'phone3'},
{img: 'img/phone4.jpg', title: 'phone4'},
]
};
let local = {
props:['img'],
template: `
<div class="box" @click="f1" >
<img :src="img.img" alt="">
<h2>{{img.title}}</h2>
</div>
`,
methods: {
f1(){
this.$emit('receive',this.img)
}
}
};
new Vue({
el:'#app01',
data:{
imgList:[],
msg:''
},
methods:{
choice(a){
this.imgList=picture[a];
this.msg='未选中广告'
},
data(b){
if (b){
this.imgList=[{img:b.img,title:b.title}];
this.msg=`${b.title}被选中了`;
}else {
this.msg=`未选中广告`;
}
}
},
components:{
local
}
});
</script>
</html>原文：https://www.cnblogs.com/hj59988326/p/12063858.html