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
? ? ? ? }
? ? })
