在我們做項目的過程中，有時候會要做一些tab欄切換效果。有兩個tab的，有三個tab的，甚至有五六七八個tab的。平常我們直接拿餓了么的tab組件用就行了，但是偶爾自己閑著沒事，自己寫個兩個tab切換效果的，即二選一效果。閑話少說，上動態效果圖

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

HTML部分

<template> <div id='app'> <div class='tabWrap'> <!-- 這個結構是tab導航，并給其綁定對應的點擊事件，在點擊事件的回調中 去控制對應內容的顯示隱藏和樣式的修改即：tab的切換--> <div class='tabNav'> <div @click='tabOne'>tab1</div> <div @click='tabTwo'>tab2</div> </div> <!-- 這個結構是tab導航對應的內容 --> <div class='tabContent'> <!-- 通過v-show控制隱藏，同一時刻隱藏一個顯示一個，就實現了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() { /* 點擊tab1的時候，讓tab1顯示，tab2隱藏，即showTabOne為true，showTabTwo為false 同時修改tab1的樣式使其'高亮',注意不要忘了修改tab2的樣式，使其'不高亮'。 點擊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>

到此這篇關于vue二選一tab欄切換新做法實現的文章就介紹到這了,更多相關vue tab欄切換內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！