用Vue写一个简单的tab选项卡

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

        }

    })