收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

使用vue.js寫一個tab選項卡效果

通常我們寫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選項卡都是一個組件.

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

vue中用動態組件實現選項卡切換效果
最近在研究vue的路上,那么今天也算個學習筆記吧!導航按鈕:divclass="tab-title"[email protected]="a='tab1'"router-linkto='/collectnewcars'新車/router-linkem/em/[email protected]="a='tab2'"rout

vue2.0實戰之使用vue-cli搭建項目(2)
Vue-cli是官方推薦的快速構建單頁應用的腳手架。官方給的建議,如果你是初次嘗試Vue,哪就老老實實用普通的書寫引入js文件,這里牽扯太多的東西,

詳解VUE的狀態控制與延時加載刷新
在實際項目中,我們經常會遇到這種狀況,某些數據我們希望等到需要的時候再去獲取,或者某些數據我們需要刷新,但是不必立刻刷新,而是延時到

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全