當前位置：
首頁 >
Vue实现选项卡切换，tab切换
發布時間：2024/1/18
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Vue实现选项卡切换，tab切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、實現tab切換就是 單擊一個選項卡顯示其對應的內容，且被點擊的選項卡改變顏色，下面有兩種實現方法（都不要忘了vue.js的目錄要寫正確）
2、第一種方法效果圖
?這個沒什么可說的，直接看代碼吧（兩種方式）
2、第一種完整代碼（下邊這段代碼是我在網上學的）
<!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>/*運用知識點：v-forv-on,簡寫@v-bind簡寫:v-show思路：循環數據，當點擊時候，把key傳到changes方法中，然后num賦值給active循環數組，只要box中key等于num就讓它顯示出來*/new Vue({el: '#app',data: {item: ["html", "css", "javascript", "Vue"], //導航欄標題cont: ["html內容", "css內容", "javascript內容", "Vue內容"], //內容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"><!-- 根據num值來添加active class 注意active是用單引號包裹的 --><!-- 添加單擊事件更改num的值 --><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><!-- 根據num動態切換顯示div內容 --><div v-show="num==1">html內容</div><div v-show="num==2">css內容</div><div v-show="num==3">javascript內容</div></div><script type="text/javascript">new Vue({el:"#app",data:{// 當前索引（顯示的索引，需要添加class的索引）num:1,},})</script></body> </html>總結
以上是生活随笔為你收集整理的Vue实现选项卡切换，tab切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求找工作秘籍
- 下一篇： vue项目中@符号没有路径提示