Vue.js實(shí)現(xiàn)tab切換效果
Vue是一個(gè)小巧輕便的JavaScript庫。它有一個(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。他通過一些特殊的hmtl語法，將DOM和數(shù)據(jù)綁定起來。一旦創(chuàng)建了綁定，DOM就會(huì)和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會(huì)相應(yīng)的發(fā)生改變，更新。
下面是我用vue.js來實(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ù)遍歷渲染到頁面上，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ì)顯示。否則隱藏。
我感覺學(xué)習(xí)vue，首先把以前的那種傳統(tǒng)思維轉(zhuǎn)變過來是主要的，其次就是不斷實(shí)踐，不斷的敲代碼，才可以更深入的學(xué)習(xí)Vue.js。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)方法
這篇文章主要給大家介紹了el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的相關(guān)資料,每個(gè)表單el-form由多個(gè)表單域el-form-item組成,需要的朋友可以參考下2023-09-09
Vue使用三方工具vueUse實(shí)現(xiàn)虛擬列表
其實(shí)采用vueUse中的useVirtualList方法同樣可以實(shí)現(xiàn)虛擬列表,這篇文章小編就來和大家詳細(xì)介紹一下如何使用vueUse實(shí)現(xiàn)簡(jiǎn)單的虛擬列表效果吧2024-04-04
VUE接入騰訊驗(yàn)證碼功能（滑塊驗(yàn)證）備忘
這篇文章主要介紹了VUE接入騰訊驗(yàn)證碼功能（滑塊驗(yàn)證）備忘,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 實(shí)現(xiàn)把路由單獨(dú)分離出來
這篇文章主要介紹了vue 實(shí)現(xiàn)把路由單獨(dú)分離出來，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
ArcGis?API?for?js在vue.js中的使用示例詳解
這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時(shí)要顯示聲明props。下面通過一個(gè)例子給大家介紹Vue中父組件向子組件通信的方法，需要的朋友參考下吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個(gè)Vue中非常經(jīng)典的問題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下2023-08-08