vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果
第二個(gè)實(shí)例是關(guān)于標(biāo)簽頁切換的，先看一下效果：
這也是一個(gè)很常見的交互效果，以往正常的javascript寫法是給各個(gè)按鈕綁定事件來切換不同的層，當(dāng)然也可以用純css寫，給上面的三個(gè)切換的層分別添加一個(gè)單選按鈕的兄弟節(jié)點(diǎn)，再用絕對(duì)定位把單選按鈕定位在三個(gè)button上面，這樣就可以用:checked偽類來單選按鈕的兄弟元素，即對(duì)應(yīng)的不同的層，我簡單的寫了一下DOM結(jié)構(gòu)，大概就是這樣：
那么用vue.js實(shí)現(xiàn)上述的效果，其實(shí)也有兩種途徑，一種使用vue-router，vue-router是vue.js的一個(gè)路由組件，在單頁面應(yīng)用中非常非常流行，如果切換的層數(shù)據(jù)量非常大的話，比如每個(gè)層都要有服務(wù)器進(jìn)行大量的數(shù)據(jù)交互，那么強(qiáng)烈建議使用vue-router，因?yàn)?code>vue-router在每次切換路由的過程中，都會(huì)自動(dòng)銷毀（destroyed）前面的組件，這樣在頻繁的操作中頁面也不會(huì)卡，而且vue-router也定義了頁面切換過程中的過渡動(dòng)畫。
如果數(shù)據(jù)量并不復(fù)雜的話，可以直接通過vue.js定義切換狀態(tài)來切換不同的層。
首先先把template和css寫好：
其中introduce、chatbar、videobar分別代表三個(gè)需要跟隨button切換的組件，接下來就可以給vue.js的button節(jié)點(diǎn)綁定事件來操控點(diǎn)擊狀態(tài)：
點(diǎn)擊不同的button，會(huì)讓active的狀態(tài)改變，同時(shí)這個(gè)狀態(tài)會(huì)作用到button上面，比如讓被點(diǎn)擊的button有個(gè)高亮的效果等等。
那么如何讓active的狀態(tài)作用到彈出層呢？其實(shí)定義一個(gè)computed函數(shù)就可以了：
總結(jié)
以上所述是小編給大家介紹的vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3實(shí)現(xiàn)動(dòng)態(tài)面包屑的代碼示例
這篇文章主要給大家介紹一下Vue3動(dòng)態(tài)面包屑是如何實(shí)現(xiàn)的，實(shí)現(xiàn)思路又是什么，以及發(fā)給大家介紹一下面包屑的功能，文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn)總結(jié)
目前Vue3.0是會(huì)兼容大部分2.x的語法,下面這篇文章主要給大家介紹了關(guān)于Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue動(dòng)態(tài)添加路由后刷新頁面白屏問題及解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由后刷新頁面白屏問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue項(xiàng)目部署到nginx/tomcat服務(wù)器的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目部署到nginx/tomcat服務(wù)器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
下面小編就為大家分享一篇解決vue多個(gè)路由共用一個(gè)頁面的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue.js開發(fā)中,我們經(jīng)常需要?jiǎng)?chuàng)建可復(fù)用的組件,這些組件可能會(huì)有自己的樣式規(guī)則,而有時(shí)我們希望父組件能夠影響子組件的樣式,本文將詳細(xì)介紹如何使用v-deep以及一些相關(guān)的最佳實(shí)踐,需要的朋友可以參考下2024-10-10