使用vue.js寫一個(gè)tab選項(xiàng)卡效果

更新時(shí)間：2017年03月25日 14:43:36 作者：勇PAN高峰

Vue 實(shí)現(xiàn) Tab切換實(shí)現(xiàn)的場景很多，比如，利用vue-router、利用第三方插件、利用組件等等.本文使用組件來實(shí)踐tab選項(xiàng)卡

通常我們寫tab選項(xiàng)卡的時(shí)候,一般都是用jq等去操作dom,給同級(jí)元素移除active類,然后,給被點(diǎn)擊元素添加active類,但是在vue.js中,我們能不去操作dom我們就盡量不操作dom,那么該如何實(shí)現(xiàn)呢?

如果使用過vue-router,那么你會(huì)發(fā)現(xiàn),vue-router在使用的時(shí)候其實(shí)就相當(dāng)于一個(gè)tab選項(xiàng)卡,在點(diǎn)擊之后,被點(diǎn)擊的router-link元素會(huì)默認(rèn)被添加上一個(gè)router-link-active的類,我們只需要設(shè)置這個(gè)類的樣式即可.(當(dāng)然,router-link-active)是vue-router默認(rèn)的類名,你可以自己配置更改名稱.這樣我們可以直接使用vue的路由功能當(dāng)tab選項(xiàng)卡使用了.那么如果不想用路由功能呢?

那么請(qǐng)看下面的方法:

html部分

<div id="app">
 <ul>  
  <li @click="toggle($index ,tab.view)" v-for="tab in tabs" :class="{active:active==$index}">
    {{tab.type}}  
   </li> 
 </ul> 
 <component :is="currentView"></component>
</div>

js部分

Vue.component('child1', { 
 template: "<p>this is child1</p>"
})
Vue.component('child2', { 
 template: "<p>this is child2</p>"
})
new Vue({ 
 el: "#app", 
 data: { 
 active: 0, 
 currentView: 'child1', 
 tabs: [ 
 {  
  type: 'tab1', 
  view: 'child1' 
 },  
 {  
  type: 'tab2', 
  view: 'child2' 
 } 
 ] 
}, 
 methods: { 
 toggle(i, v){ 
 this.active = i 
 this.currentView = v 
 } 
 }
})

然后我們只需要設(shè)置一個(gè).active的樣式就可以了,比如設(shè)置一個(gè)最簡單的

css

.active{
 color:red
}

簡易的vue.js tab 選項(xiàng)卡

原理很簡單,我們給tab選項(xiàng)綁定了toggle方法,點(diǎn)擊時(shí)讓active等于其index,從而給其添加了一個(gè)active類,而顯示的內(nèi)容也是同樣的原理．比起傳統(tǒng)操作dom方法，這個(gè)整體看上去更簡潔,不過麻煩在每個(gè)tab選項(xiàng)卡都是一個(gè)組件.

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue如何通過$router.push傳參數(shù)
這篇文章主要介紹了vue如何通過$router.push傳參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue-router傳遞參數(shù)的幾種方式實(shí)例詳解
vue-router傳遞參數(shù)分為兩大類，一類是編程式的導(dǎo)航 router.push另一類是聲明式的導(dǎo)航 <router-link>，本文通過實(shí)例代碼給大家介紹vue-router傳遞參數(shù)的幾種方式，感興趣的朋友跟隨小編一起看看吧
2018-11-11
Vue使用wavesurfer.js實(shí)現(xiàn)音頻可視化的示例詳解
WaveSurfer.js是一個(gè)開源的音頻可視化庫,用于創(chuàng)建交互式、可定制的波形,本文將為大家簡單介紹了Vue如何使用wavesurfer.js實(shí)現(xiàn)音頻可視化功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04
vue中使用vue-print.js實(shí)現(xiàn)多頁打印
這篇文章主要介紹了vue中使用vue-print.js實(shí)現(xiàn)多頁打印，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐
本文主要介紹了vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue部署包可配置后臺(tái)接口地址的方法
這篇文章主要介紹了vue部署包可配置后臺(tái)接口地址的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-03-03
vuex提交state&&實(shí)時(shí)監(jiān)聽state數(shù)據(jù)的改變方法
今天小編就為大家分享一篇vuex提交state&&實(shí)時(shí)監(jiān)聽state數(shù)據(jù)的改變方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
一文詳解Vue中的虛擬DOM與Diff算法
vue中的diff算法時(shí)常是面試過程中的考點(diǎn),本文將為大家講解何為diff以及diff算法的實(shí)現(xiàn)過程,那么在了解diff之前,我們需要先了解虛擬DOM是什么,需要的朋友可以參考下
2024-02-02
vue2.0 elementUI制作面包屑導(dǎo)航欄
本篇文章主要給大家詳細(xì)代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程，對(duì)此有興趣的朋友可以學(xué)習(xí)下。
2018-02-02
vuex vue簡單使用知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了關(guān)于vuex vue簡單使用知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以參考下。
2019-08-08