**
這篇文章主要介紹了詳解使用vue實現tab操作,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在使用jquery類庫實現tab功能時，是獲取滑鼠在mousenter或click時的index值，然後切換到當前的標題和內容，把其他的標題和內容的狀態去掉：
$('.tab .title').find('.item')
.removeclass('current').eq(index).addclass('current'); // 為index位置的title新增current
$('.tab .content').find('.item')
.hide().eq(index).show(); // 顯示index位置的內容
那麼在使用vue實現tab功能時，就不是像jquery這種直接操作dom了。我這裡總結了下實現tab功能的3個思路，僅供參考。
1. 切換content或者直接切換內容
這種思路下，我們首先把結構搭建起來，然後用乙個變數selected表示tab當前展示的位置，給li標籤新增mouseenter或click事件，將當前的index傳遞進去：
html**:
js**:
data: ,,}
` }
] },
methods:
}})繫結的change(index)事件，每次都將index給了selected，然後tab就會切換到對應的標籤。
上面的**裡，我們是通過切換div的顯示與隱藏來進行執行的。tab中的content裡如果只有純html內容，我們可以直接把list[selected].content展示到.bd中：
每次selected變換時，bd的內容都會發生變化。
2. 使用currentview
在上面的實現方式中，第3個tab裡有個輸入框與p標籤雙向繫結，但是沒有效果，因為vue是把list中的內容作為html元素填充到頁面中的，message並沒有作為vue的屬性繫結給input。那麼使用組建和currentview就能彌補這個缺陷。
無論使用全域性註冊還是區域性註冊的元件，思路都是一樣的，我們暫時使用全域性註冊的元件來實現。
每個元件裡展示的是乙個tab裡的內容，先註冊3個元件：
// tab0vue.component('item0',);
// tab1
vue.component('item1',)
// tab2
vue.component('item2',
}, template : `hello world}`
})
然後在html中使用component來展示對應元件的內容，title的展示方式不變：
currentview屬性可以讓多個元件可以使用同乙個掛載點，並動態切換：
data: ,,]
}, methods:
}})這樣 message 在元件裡就是乙個獨立的data屬性，能在tab裡也使用vue繫結事件了.
3. 使用slot方式等
使用slot方式進行內容分發或者乙個獨立的元件，可以讓我們把**整合到一塊，對外提供乙個資料介面，只要按照既定的格式填寫資料即可。
3.1 slot
用slot方式寫乙個子元件：
vue.component('my-slot-tab', );
父元件模板：
}
父元件中slot="title"會替換子元件中name="title"的slot，父元件中slot="content"會替換子元件中name="content"的slot.最終渲染出來的tab結構與上面之前的**一樣。
3.2 其他元件方式
還有一種方式就是把所有的模板都寫到元件中。
子元件：
vue.component('my-tab',
}, methods :
}});
父元件：
這種只需要傳遞乙個list即可。
對比這兩種方法，slot中可以自定義更多的內容，而下面的方法使用起來更加簡單，只是自定義的東西比較少。
4. 總結
Vue 實現tab切換
v bind 三元 v for item,index in tabs class click tab index 先使用v for把資料遍歷渲染到頁面上，v for中有乙個index表示索引，將index作為引數傳入到tab index 這個函式中，在data中定義乙個num變數，在title中如果...
Vue實現tab標題切換例項
方法 一 html部分布局 html部分 如下所示 標題二標題三 標題四 內容一 內容二內容三 內容四給選中部分加css樣式 css部分 如下所示 li.hx activity引入vue.js實現效果 js部分 如下所示 new vue 方法 二 menulist for item,index in...
使用angularJs實現tab切換
最近的專案客戶要求使用angularjs,不得不說angularjs用起來確實方便。但是有些功能事件不會的話還是會用jq。其實在使用angularjs的時候，能不用jq最後還是不用jq，以免混亂 衝突。閒話少敘，專案中有tab切換的需要，這很常見。若是不引用angularjs 的話，一般是自己用jq...