> 效果如图 >  > html 代码 ``` <div id="app"> <div class="tab-list"> <a :class="{'tab': tabId==0}" @click="clickT(0)">html</a> <a :class="{'tab': tabId==1}" @click="clickT(1)">html</a> <a :class="{'tab': tabId==2}" @click="clickT(2)">html</a> <a :class="{'tab': tabId==3}" @click="clickT(3)">html</a> </div> <div class="content" v-show="tabId==0">0</div> <div class="content" v-show="tabId==1">1</div> <div class="content" v-show="tabId==2">2</div> <div class="content" v-show="tabId==3">3</div> </div> ``` > js 代码 ``` var vm = new Vue({ el: '#app', data() { return { tabId: 0 } }, methods: { clickT(num) { this.tabId = num; console.log(this.tabId) } }, }) ``` > css 代码 ``` .tab-list { width: 400px; height: 20px; line-height: 20px; background: gray; display: flex; justify-content: space-between; } .tab-list a { flex: 1; text-align: center; } .tab { background: cadetblue; color: aliceblue; } .content { width: 400px; height: 400px; border: 1px solid black; } ```