溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
通常我們寫tab選項卡的時候,一般都是用jq等去操作dom,給同級元素移除active類,然后,給被點擊元素添加active類,但是在vue.js中,我們能不去操作dom我們就盡量不操作dom,那么該如何實現呢?
如果使用過vue-router,那么你會發現,vue-router在使用的時候其實就相當于一個tab選項卡,在點擊之后,被點擊的router-link元素會默認被添加上一個router-link-active的類,我們只需要設置這個類的樣式即可.(當然,router-link-active)是vue-router默認的類名,你可以自己配置更改名稱.這樣我們可以直接使用vue的路由功能當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
}
}
})
然后我們只需要設置一個.active的樣式就可以了,比如設置一個最簡單的
css
.active{
color:red
}
簡易的vue.js tab 選項卡
原理很簡單,我們給tab選項綁定了toggle方法,點擊時讓active等于其index,從而給其添加了一個active類,而顯示的內容也是同樣的原理．比起傳統操作dom方法，這個整體看上去更簡潔,不過麻煩在每個tab選項卡都是一個組件.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
