<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app01">
<input type="button" value="手机" class="btn" @click="showImg('phone')">
<input type="button" value="电视" class="btn" @click="showImg('tv')">
<h2>{{advert}}</h2>
<div>
<goods-Show :goods-list="goodsList" @ad="showAdvert"></goodsShow>
</div>
</div>
</body>
<script>
let 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 goodsShow = {
props: ['goodsList'],
template: `
<div>
<div v-for="goods in goodsList" @click="changeSelect(goods.title)">
<img :src="goods.img" alt="" width="200px">
<p>{{goods.title}}</p>
</div>
</div>
`,
methods: {
changeSelect (title) {
this.$emit('ad', title);
},
},
};
new Vue({
el: "#app01",
data: {
goodsList: ad_data['phone'],
advert: "未选中任何广告",
},
methods: {
showImg (item) {
this.goodsList = ad_data[item];
},
showAdvert (title) {
this.advert = title + '被选中';
},
},
components: {
goodsShow,
},
});
</script>
</html>