Vue.js實(shí)現(xiàn)tab切換效果
Vue是一個(gè)小巧輕便的JavaScript庫(kù)。它有一個(gè)簡(jiǎn)單易懂的API，能夠讓開發(fā)者在開發(fā)web應(yīng)用的時(shí)候更加簡(jiǎn)易便捷。實(shí)際上，一直讓Vue引以為豪的是它的便捷性、執(zhí)行力、靈活性。
目前在學(xué)習(xí)Vue.js。在學(xué)習(xí)的時(shí)候需要把手動(dòng)操作DOM的思維去掉，因?yàn)閂ue是數(shù)據(jù)驅(qū)動(dòng)，不需要手動(dòng)操作DOM。他通過(guò)一些特殊的hmtl語(yǔ)法，將DOM和數(shù)據(jù)綁定起來(lái)。一旦創(chuàng)建了綁定，DOM就會(huì)和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會(huì)相應(yīng)的發(fā)生改變，更新。
下面是我用vue.js來(lái)實(shí)現(xiàn)的tab切換功能。
<!--這里是html結(jié)構(gòu)-->
<div id="app">
<ul>
<li
v-for="(item,index) in tabs"
:class="{active:index == num}"
@click="tab(index)">{{item}}</li>
</ul>
<div class="tabCon">
<div
v-for='(itemCon,index) in tabContents'
v-show=" index == num">{{itemCon}}</div>
</div>
</div>
<!--這里是js代碼-->
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs: ["標(biāo)題一", "標(biāo)題二","標(biāo)題三"],
tabContents: ["內(nèi)容一", "內(nèi)容二","內(nèi)容三"],
num: 1
},
methods: {
tab(index) {
this.num = index;
}
}
});
</script>
使用vue.js實(shí)現(xiàn)tab切換很簡(jiǎn)單，先使用v-for把數(shù)據(jù)遍歷渲染到頁(yè)面上，v-for中有一個(gè)index表示索引，將index作為參數(shù)傳入到tab（index）這個(gè)函數(shù)中，在data中定義一個(gè)num變量，在title中如果index==num,這個(gè)title就會(huì)添加一個(gè)acive的class。當(dāng)然，這個(gè)num是需要在tab（）這個(gè)函數(shù)中不斷改變的，需要將傳入的索引值賦值給num，這樣在.tabCon里，我們就可以用v-show做下判斷。v-show=”index==num”,如果等于的話，當(dāng)前的內(nèi)容就會(huì)顯示。否則隱藏。
我感覺(jué)學(xué)習(xí)vue，首先把以前的那種傳統(tǒng)思維轉(zhuǎn)變過(guò)來(lái)是主要的，其次就是不斷實(shí)踐，不斷的敲代碼，才可以更深入的學(xué)習(xí)Vue.js。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問(wèn)題
這篇文章主要介紹了詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue開發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
這篇文章主要介紹了vue開發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
基于Vue?+?ElementUI實(shí)現(xiàn)可編輯表格及校驗(yàn)
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實(shí)現(xiàn)可編輯表格及校驗(yàn),文中有詳細(xì)的代碼講解和實(shí)現(xiàn)思路,講解的非常詳細(xì),有需要的朋友可以參考下2023-08-08
Vue使用provide各種傳值后inject獲取undefined的問(wèn)題及解決
這篇文章主要介紹了Vue使用provide各種傳值后inject獲取undefined的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue通過(guò)ref獲取不到$refs問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題
今天小編就為大家分享一篇vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue-rx的初步使用教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組
這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要為大家通過(guò)示例解析Ant?Design?Vue組件slots作用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05