如上圖所示 效果圖：

實現代碼：

<template> <div id="app"> <button :class="index==qieindex?'red':''" @click="qie(index)" v-for="(item,index) in list">{{item.name}} </button><ul><li v-for="(item,index) in list" v-show="index==qieindex">{{item.content}}</li></ul> </div> </template> <script> new Vue({el:"#app",data:{list:[{name:'大象',content:'大象是最大的陸地生物'},{name:'鯨魚',content:'鯨魚是最大的海洋生物'},{name:'猴子',content:'猴子是生性調皮的生物'},{name:'狗',content:'狗是人類的伙伴'},],qieindex:0,},methods:{qie(index){this.qieindex=index}} }) </script>

Tab數據不是固定 ：
采用上面這種方式

Tab數據固定：
采用組件化切換的方式
參考地址：https://blog.csdn.net/qq_24147051/article/details/90270403

總結

以上是生活随笔為你收集整理的vue切换tab的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。