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

如果使用過vue-router,那么你會發(fā)現(xiàn),vue-router在使用的時(shí)候其實(shí)就相當(dāng)于一個(gè)tab選項(xiàng)卡,在點(diǎn)擊之后,被點(diǎn)擊的router-link元素會默認(rèn)被添加上一個(gè)router-link-active的類,我們只需要設(shè)置這個(gè)類的樣式即可.(當(dāng)然,router-link-active)是vue-router默認(rèn)的類名,你可以自己配置更改名稱.這樣我們可以直接使用vue的路由功能當(dāng)tab選項(xià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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。