使用vue.js寫一個tab選項卡效果
更新時間：2017年03月25日 14:43:36 作者：勇PAN高峰
Vue 實現(xiàn) Tab切換實現(xiàn)的場景很多，比如，利用vue-router、利用第三方插件、利用組件等等.本文使用組件來實踐tab選項卡
通常我們寫tab選項卡的時候,一般都是用jq等去操作dom,給同級元素移除active類,然后,給被點擊元素添加active類,但是在vue.js中,我們能不去操作dom我們就盡量不操作dom,那么該如何實現(xiàn)呢?
如果使用過vue-router,那么你會發(fā)現(xiàn),vue-router在使用的時候其實就相當(dāng)于一個tab選項卡,在點擊之后,被點擊的router-link元素會默認(rèn)被添加上一個router-link-active的類,我們只需要設(shè)置這個類的樣式即可.(當(dāng)然,router-link-active)是vue-router默認(rèn)的類名,你可以自己配置更改名稱.這樣我們可以直接使用vue的路由功能當(dāng)tab選項卡使用了.那么如果不想用路由功能呢?
那么請看下面的方法:
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è)置一個.active的樣式就可以了,比如設(shè)置一個最簡單的
css
.active{
color:red
}
簡易的vue.js tab 選項卡
原理很簡單,我們給tab選項綁定了toggle方法,點擊時讓active等于其index,從而給其添加了一個active類,而顯示的內(nèi)容也是同樣的原理．比起傳統(tǒng)操作dom方法，這個整體看上去更簡潔,不過麻煩在每個tab選項卡都是一個組件.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題
這篇文章主要介紹了vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue-cli腳手架搭建的項目去除eslint驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue?cli?局部混入mixin和全局混入mixin的過程
這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue如何解決循環(huán)引用組件報錯的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
使用vuex較為優(yōu)雅的實現(xiàn)一個購物車功能的示例代碼
這篇文章主要介紹了使用vuex較為優(yōu)雅的實現(xiàn)一個購物車功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了vue如何給數(shù)組添加新對象并賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue獲取或者改變vuex中的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue 檢測用戶上傳圖片寬高的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了 Vue 源碼分析之 Observer實現(xiàn)過程，Observer 最主要的作用就是實現(xiàn)了touch -Data(getter) - Collect as Dependency這段過程，也就是依賴收集的過程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07