css部分
* {
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 500px;
margin: 0 auto;
}
button{
width: 25%;
height: 50px;
border: none;
background: #e4e6af;
margin-left: 4%;
outline: none;
cursor: pointer;
}
.change{
width: 85%;
height: 200px;
margin-left: 4%;
border: 1px solid black;
}
.div1{
text-align: center;
line-height: 200px;
background: powderblue;
}
.div2{
text-align: center;
line-height: 200px;
background: peachpuff;
}
.div3{
text-align: center;
line-height: 200px;
background: plum;
}
body部分
<div id="box">
<div class="tab">
<button @click="tabId=0" class="{tabId=0}">aaa</button>
<button @click="tabId=1" class="{tabId=1}">bbb</button>
<button @click="tabId=2" class="{tabId=2}">ccc</button>
</div>
<div class="change">
<div v-show="tabId==0" class="div1">111</div>
<div v-show="tabId==1" class="div2">222</div>
<div v-show="tabId==2" class="div3">333</div>
</div>
</div>
script部分
new Vue({
el:'#box',
data:{
tabId:0
}
})
