<div id="app">
<button class="btn btn-outline-primary" :class="{active: isShowA}" @click="changeContent('A')">分頁一</button>
<button class="btn btn-outline-primary" :class="{active: isShowB}" @click="changeContent('B')">分頁二</button>
<button class="btn btn-outline-primary" :class="{active: isShowC}" @click="changeContent('C')">分頁三</button>
<button class="btn btn-outline-primary" :class="{active: isShowD}" @click="changeContent('D')">分頁四</button>
<div class="card" style="width: 18rem;" v-show="isShowA">
<img class="card-img-top" :src="contentObj[type].imgUrl" alt="Card image cap">
<div class="card-body">
<h5 class="card-title font-weight-bold"> {{ contentObj[type].title }} </h5>
<p class="card-text"> {{ contentObj[type].description }} </p>
</div>
</div>
<div class="card" style="width: 18rem;" v-show="isShowB">
<img class="card-img-top" :src="contentObj[type].imgUrl" alt="Card image cap">
<div class="card-body">
<h5 class="card-title font-weight-bold"> {{ contentObj[type].title }} </h5>
<p class="card-text"> {{ contentObj[type].description }} </p>
</div>
</div>
<div class="card" style="width: 18rem;" v-show="isShowC">
<img class="card-img-top" :src="contentObj[type].imgUrl" alt="Card image cap">
<div class="card-body">
<h5 class="card-title font-weight-bold"> {{ contentObj[type].title }} </h5>
<p class="card-text"> {{ contentObj[type].description }} </p>
</div>
</div>
<div class="card" style="width: 18rem;" v-show="isShowD">
<img class="card-img-top" :src="contentObj[type].imgUrl" alt="Card image cap">
<div class="card-body">
<h5 class="card-title font-weight-bold"> {{ contentObj[type].title }} </h5>
<p class="card-text"> {{ contentObj[type].description }} </p>
</div>
</div>
</div>
let vm = new Vue({
el: '#app',
data: {
type: 'A',
isShowA: true,
isShowB: false,
isShowC: false,
isShowD: false,
contentObj: {
A: {
imgUrl:'https://upload.cc/i1/2021/05/22/JfmUFA.jpg',
title: '電扇促銷',
description: '這是一個吹起來真的不太會涼的電扇'
},
B: {
imgUrl:'https://i.postimg.cc/bNRNQ2Rx/sam-moqadam-kvmds-Tr-GOBM-unsplash.jpg',
title: '家具促銷',
description: '這是一張做了會倒掉的椅子'
},
C: {
imgUrl:'https://i.postimg.cc/Bn6sH7b3/samantha-gades-XDaa1-RPb6n8-unsplash.jpg',
title: '桌子促銷',
description: '這張桌子真的很難用，但還是拜託你買'
},
D: {
imgUrl:'https://i.postimg.cc/7h98TSyb/helena-lopes-e-CAUr5v-KM74-unsplash.jpg',
title: '對杯促銷',
description: '你可以試試看50公斤的杯子拿起來是什麼感覺'
},
}
},
methods: {
changeContent (target) {
this.type = target
if (target === 'A') {
this.isShowA = true
this.isShowB = false
this.isShowC = false
this.isShowD = false
}
else if (target === 'B') {
this.isShowA = false
this.isShowB = true
this.isShowC = false
this.isShowD = false
}
else if (target === 'C') {
this.isShowA = false
this.isShowB = false
this.isShowC = true
this.isShowD = false
}
else {
this.isShowA = false
this.isShowB = false
this.isShowC = false
this.isShowD = true
}
}
}
})
