當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue实现选项卡切换，tab切换

發(fā)布時(shí)間：2024/1/18 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue实现选项卡切换，tab切换小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、實(shí)現(xiàn)tab切換就是單擊一個(gè)選項(xiàng)卡顯示其對(duì)應(yīng)的內(nèi)容，且被點(diǎn)擊的選項(xiàng)卡改變顏色，下面有兩種實(shí)現(xiàn)方法（都不要忘了vue.js的目錄要寫(xiě)正確）

2、第一種方法效果圖

?這個(gè)沒(méi)什么可說(shuō)的，直接看代碼吧（兩種方式）

2、第一種完整代碼（下邊這段代碼是我在網(wǎng)上學(xué)的）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./vue.js"></script><style>button {width: 40px;height: 30px;text-align: center;border: none;cursor: pointer;}.active {background: red;color: #fff;border: none;}* {margin: 0;padding: 0;list-style: none;}#app {width: 600px;height: 600px;border: 1px solid #b3b3b3;margin: auto;}ul {height: 50px;background-color: #b6b6b6;color: #000;display: flex;justify-content: space-between;align-items: center;}ul li {width: 150px;text-align: center;line-height: 50px;font-size: 18px;}#app div {padding: 10px;font-size: 18px;}.active {background-color: #00557F;color: #fff;}</style></head><body><div id="app"><ul><li v-for="(val,index) in item" @click="changes(index)" :class="{active:index == num}">{{item[index]}}</li></ul><div v-for="(val,index) in cont" v-show="index==num">{{val}}</div></div><script>/*運(yùn)用知識(shí)點(diǎn)：v-forv-on,簡(jiǎn)寫(xiě)@v-bind簡(jiǎn)寫(xiě):v-show思路：循環(huán)數(shù)據(jù)，當(dāng)點(diǎn)擊時(shí)候，把key傳到changes方法中，然后num賦值給active循環(huán)數(shù)組，只要box中key等于num就讓它顯示出來(lái)*/new Vue({el: '#app',data: {item: ["html", "css", "javascript", "Vue"], //導(dǎo)航欄標(biāo)題cont: ["html內(nèi)容", "css內(nèi)容", "javascript內(nèi)容", "Vue內(nèi)容"], //內(nèi)容num: 0},methods: {changes(key) {this.num = key;}}});</script></body> </html>

?3、第二種方式效果圖

?4、第二種方式完整代碼

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="../vue.js"></script><style type="text/css">.active{color: firebrick;}</style></head><body><div id="app"><button :class="num==1?'active':''" @click="num=1">html</button><button :class="num==2?'active':''" @click="num=2">css</button><button :class="num==3?'active':''" @click="num=3">javascript</button><div v-show="num==1">html內(nèi)容</div><div v-show="num==2">css內(nèi)容</div><div v-show="num==3">javascript內(nèi)容</div></div><script type="text/javascript">new Vue({el:"#app",data:{// 當(dāng)前索引（顯示的索引，需要添加class的索引）num:1,},})</script></body> </html>

總結(jié)

以上是生活随笔為你收集整理的Vue实现选项卡切换，tab切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。