在我們做項(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 @click='tabOne'>tab1</div> <div @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 v-show='showTabOne'>我是切換1</div> <div 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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！