您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用vue實現(xiàn)tab切換操作,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
在使用jQuery類庫實現(xiàn)tab功能時,是獲取鼠標(biāo)在mousenter或click時的index值,然后切換到當(dāng)前的標(biāo)題和內(nèi)容,把其他的標(biāo)題和內(nèi)容的狀態(tài)去掉:
$('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 為index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show(); // 顯示index位置的內(nèi)容
那么在使用vue實現(xiàn)tab功能時,就不是像jQuery這種直接操作DOM了。我這里總結(jié)了下實現(xiàn)tab功能的3個思路,僅供參考。
1. 切換content或者直接切換內(nèi)容
這種思路下,我們首先把結(jié)構(gòu)搭建起來,然后用一個變量selected表示tab當(dāng)前展示的位置,給li標(biāo)簽添加mouseenter或click事件,將當(dāng)前的index傳遞進(jìn)去:
html代碼:
<div class="hd"> <ul class="clearfix"> <li v-for="(item, index) of list" :class="{active:selected==index}" @mouseenter="change(index)">{{item.title}}</li> </ul> </div> <div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div>
js代碼:
var app = new Vue({ el: '#app', data: { selected: 0, //當(dāng)前位置 list: [ { title: '11111', content: '11111content' }, { title: '22222', content: '222222content' }, { title: '33333', content: `<div> <span >hello world</span> <p><input type="text" v-model="message"></p> <p>{{message}}</p> </div>` } ] }, methods: { change(index) { this.selected = index; } } })
綁定的change(index)
事件,每次都將index給了selected
,然后tab就會切換到對應(yīng)的標(biāo)簽。
上面的代碼里,我們是通過切換div的顯示與隱藏來進(jìn)行執(zhí)行的。tab中的content里如果只有純html內(nèi)容,我們可以直接把list[selected].content
展示到.bd中:
<div class='bd' v-html="list[selected].content"></div>
每次selected變換時,bd的內(nèi)容都會發(fā)生變化。
2. 使用currentView
在上面的實現(xiàn)方式中,第3個tab里有個輸入框與p標(biāo)簽雙向綁定,但是沒有效果,因為vue是把list中的內(nèi)容作為html元素填充到頁面中的,message并沒有作為vue的屬性綁定給input。那么使用組建和currentView就能彌補(bǔ)這個缺陷。
無論使用全局注冊還是局部注冊的組件,思路都是一樣的,我們暫時使用全局注冊的組件來實現(xiàn)。
每個組件里展示的是一個tab里的內(nèi)容,先注冊3個組件:
// tab0 Vue.component('item0',{ template : '<div>1111111content</div>' }); // tab1 Vue.component('item1',{ template : '<div>222222content</div>' }) // tab2 Vue.component('item2',{ data(){ return{ message : '' } }, template : `<div> <span >hello world</span> <p><input type="text" v-model="message"></p> <p>{{message}}</p> </div>` })
然后在html中使用component來展示對應(yīng)組件的內(nèi)容,title的展示方式不變:
<div class="hd"> <ul class="clearfix"> <li v-for="(item, index) of list" :class="{active:selected==index}" @mouseenter="change(index)">{{item.title}}</li> </ul> </div> <component :is="currentView"></component>
currentView屬性可以讓多個組件可以使用同一個掛載點,并動態(tài)切換:
var app = new Vue({ el: '#app', data: { selected: 0, currentView : 'item0', list: [ { title: '11111' }, { title: '22222' }, { title: '33333' } ] }, methods: { change(index) { this.selected = index; this.currentView = 'item'+index; // 切換currentView } } })
這樣 message 在組件里就是一個獨立的data屬性,能在tab里也使用vue綁定事件了.
3. 使用slot方式等
使用slot
方式進(jìn)行內(nèi)容分發(fā)或者一個獨立的組件,可以讓我們把代碼整合到一塊,對外提供一個數(shù)據(jù)接口,只要按照既定的格式填寫數(shù)據(jù)即可。
3.1 slot
用slot方式寫一個子組件:
Vue.component('my-slot-tab', { props : ['list', 'selected'], template : `<div class="tab"> <div class="hd"> <ul class="clearfix"> <slot name="title" v-for="(item, index) in list" :index="index" :text="item.title"> </slot> </ul> </div> <div class="bd"> <slot name="content" :content="list[selected].content"></slot> </div> </div>` });
父組件模板:
<my-slot-tab :list="list" :selected="selected"> <template slot="title" scope="props"> <li :class="{active:selected==props.index, item:true}" @mouseenter="change(props.index)">{{ props.text }}</li> </template> <template slot="content" scope="props"> <div v-html="props.content"></div> </template> </my-slot-tab>
父組件中slot="title"
會替換子組件中name="title"
的slot,父組件中slot="content"
會替換子組件中name="content"
的slot.最終渲染出來的tab結(jié)構(gòu)與上面之前的代碼一樣。
3.2 其他組件方式
還有一種方式就是把所有的模板都寫到組件中。
子組件:
Vue.component('my-tab', { props : ['list'], template : `<div class="tab"> <div class="hd"> <ul class="clearfix"> <li v-for="(item, index) in list" :class="{active:selected==index, item:true}" @mouseenter="change(index)">{{item.title}}</li> </ul> </div> <div class="bd"> <div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div> </div> </div>`, data(){ return{ selected:0 } }, methods : { change(index){ this.selected = index; } } });
父組件:
<my-tab :list="list"></my-tab>
這種只需要傳遞一個list即可。
對比這兩種方法,slot中可以自定義更多的內(nèi)容,而下面的方法使用起來更加簡單,只是自定義的東西比較少。
看完了這篇文章,相信你對“怎么使用vue實現(xiàn)tab切換操作”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。