vue二選一tab欄切換新做法實(shí)現(xiàn)
問題描述
在我們做項(xiàng)目的過程中,有時候會要做一些tab欄切換效果。有兩個tab的,有三個tab的,甚至有五六七八個tab的。平常我們直接拿餓了么的tab組件用就行了,但是偶爾自己閑著沒事,自己寫個兩個tab切換效果的,即二選一效果。閑話少說,上動態(tài)效果圖
本案例適合兩個tab的(三個tab的可以仿照我的寫,如果是四五個tab用餓了么組件會更快些)
代碼如下
HTML部分
<template> <div id="app"> <div class="tabWrap"> <!-- 這個結(jié)構(gòu)是tab導(dǎo)航,并給其綁定對應(yīng)的點(diǎn)擊事件,在點(diǎn)擊事件的回調(diào)中 去控制對應(yīng)內(nèi)容的顯示隱藏和樣式的修改即:tab的切換--> <div class="tabNav"> <div class="navOne" @click="tabOne">tab1</div> <div class="navTwo" @click="tabTwo">tab2</div> </div> <!-- 這個結(jié)構(gòu)是tab導(dǎo)航對應(yīng)的內(nèi)容 --> <div class="tabContent"> <!-- 通過v-show控制隱藏,同一時刻隱藏一個顯示一個,就實(shí)現(xiàn)了tab欄的切換效果了 --> <div class="navOneBox" v-show="showTabOne">我是切換1</div> <div class="navTwoBox" v-show="showTabTwo">i am tab2</div> </div> </div> </div> </template>
js部分
<script> export default { name: "app", data() { return { showTabOne: true, // 二選一tab切換 showTabTwo: false, // 二選一tab切換 }; }, methods: { // 二選一tab欄切換 tabOne() { /* 點(diǎn)擊tab1的時候,讓tab1顯示,tab2隱藏,即showTabOne為true,showTabTwo為false 同時修改tab1的樣式使其"高亮",注意不要忘了修改tab2的樣式,使其"不高亮"。 點(diǎn)擊tab2的時候,也是同理。 */ this.showTabOne = true; this.showTabTwo = false; document.querySelector(".navOne").style.backgroundColor = "#fff"; document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3"; document.querySelector(".navOne").style.color = "#3985EC"; document.querySelector(".navTwo").style.color = "#80868D"; }, // 二選一tab欄切換 tabTwo() { this.showTabTwo = true; this.showTabOne = false; document.querySelector(".navOne").style.backgroundColor = "#e3e3e3"; document.querySelector(".navTwo").style.backgroundColor = "#fff"; document.querySelector(".navTwo").style.color = "#3985EC"; document.querySelector(".navOne").style.color = "#80868D"; }, }, }; </script>
css部分
<style lang="less"> .tabNav { width: 126px; height: 30px; border-radius: 2px; background-color: #e3e3e3; display: flex; align-items: center; justify-content: space-evenly; .navOne { width: 60px; height: 26px; border-radius: 2px; background-color: #fff; color: #3985ec; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; } .navTwo { width: 60px; height: 26px; color: #80868d; border-radius: 2px; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; } } .tabContent { margin-top: 8px; .navOneBox { background-color: #bfa; } .navTwoBox { background-color: #baf; } } </style>
到此這篇關(guān)于vue二選一tab欄切換新做法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue tab欄切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下2023-02-02使用Vue-neo4j實(shí)現(xiàn)繪制三國人物圖譜關(guān)系
這篇文章主要介紹了使用Vue-neo4j實(shí)現(xiàn)繪制三國人物圖譜關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04如何使用Vue3實(shí)現(xiàn)文章內(nèi)容中多個"關(guān)鍵詞"標(biāo)記高亮顯示
高亮顯示是我們?nèi)粘i_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3實(shí)現(xiàn)文章內(nèi)容中多個"關(guān)鍵詞"標(biāo)記高亮顯示的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11總結(jié)4個方面優(yōu)化Vue項(xiàng)目
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項(xiàng)目的四個總要點(diǎn),對此有需要的朋友們學(xué)習(xí)下天。2019-02-02vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11解決uniapp項(xiàng)目在微信開發(fā)工具里打開報(bào)錯Error:app.json:在項(xiàng)目根目錄未找到app.json
這篇文章主要給大家介紹了關(guān)于解決uniapp項(xiàng)目在微信開發(fā)工具里打開報(bào)錯Error:app.json:在項(xiàng)目根目錄未找到app.json的相關(guān)資料,文中通過圖文將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue.js 2.0窺探之Virtual DOM到底是什么?
大家可能聽說Vue.js 2.0已經(jīng)發(fā)布,并且在其中新添加如了一些新功能。其中一個功能就是“Virtual DOM”。那么下面這篇文章就來給大家詳細(xì)介紹Vue.js 2.0中的Virtual DOM到底是什么?需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02