在我們做項(xiàng)目的過(guò)程中，有時(shí)候會(huì)要做一些tab欄切換效果。有兩個(gè)tab的，有三個(gè)tab的，甚至有五六七八個(gè)tab的。平常我們直接拿餓了么的tab組件用就行了，但是偶爾自己閑著沒(méi)事，自己寫(xiě)個(gè)兩個(gè)tab切換效果的，即二選一效果。閑話少說(shuō)，上動(dòng)態(tài)效果圖

本案例適合兩個(gè)tab的（三個(gè)tab的可以仿照我的寫(xiě)，如果是四五個(gè)tab用餓了么組件會(huì)更快些）

HTML部分

<template> <div id='app'> <div class='tabWrap'> <!-- 這個(gè)結(jié)構(gòu)是tab導(dǎo)航，并給其綁定對(duì)應(yīng)的點(diǎn)擊事件，在點(diǎn)擊事件的回調(diào)中 去控制對(duì)應(yīng)內(nèi)容的顯示隱藏和樣式的修改即：tab的切換--> <div class='tabNav'> <div @click='tabOne'>tab1</div> <div @click='tabTwo'>tab2</div> </div> <!-- 這個(gè)結(jié)構(gòu)是tab導(dǎo)航對(duì)應(yīng)的內(nèi)容 --> <div class='tabContent'> <!-- 通過(guò)v-show控制隱藏，同一時(shí)刻隱藏一個(gè)顯示一個(gè)，就實(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的時(shí)候，讓tab1顯示，tab2隱藏，即showTabOne為true，showTabTwo為false 同時(shí)修改tab1的樣式使其'高亮',注意不要忘了修改tab2的樣式，使其'不高亮'。 點(diǎn)擊tab2的時(shí)候，也是同理。 */ 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)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！