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

網(wǎng)站建設公司,為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及定制網(wǎng)站建設服務,專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對成都三輪攪拌車等多個行業(yè)擁有豐富的網(wǎng)站建設經(jīng)驗的網(wǎng)站建設公司。專業(yè)網(wǎng)站設計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站推廣優(yōu)化,H5建站,響應式網(wǎng)站。

如果使用過vue-router,那么你會發(fā)現(xiàn),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類,而顯示的內(nèi)容也是同樣的原理．比起傳統(tǒng)操作dom方法，這個整體看上去更簡潔,不過麻煩在每個tab選項卡都是一個組件.

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：使用vue.js寫一個tab選項卡效果
網(wǎng)頁鏈接：http://www.chinadenli.net/article42/iejehc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、商城網(wǎng)站、企業(yè)網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站排名、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)