vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果（內(nèi)容可自定義）示例
更新時(shí)間：2019年02月11日 10:36:53 作者：xiaoshulin520
這篇文章主要介紹了vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)內(nèi)容可自定義的tab點(diǎn)擊切換功能相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果。分享給大家供大家參考，具體如下：
這里利用vue2.0 實(shí)現(xiàn)tab標(biāo)簽切換效果 比較實(shí)用
初學(xué)vue，練習(xí)寫(xiě)了一個(gè)demo 網(wǎng)上有很多同樣的例子，但都只是改text數(shù)據(jù)，如果我想加入圖片或者復(fù)雜的dom結(jié)構(gòu)就不實(shí)用，今天這個(gè)就剛好可以。
先上代碼：
html部分 【記得引入vue文件哦】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.fzitv.net vue2.0 實(shí)現(xiàn)tab標(biāo)簽切換</title>
</head>
<style type="text/css">
.tab{width: 100px;height: 30px;text-align: center;border: 1px solid #ccc;float: left;line-height: 30px;}
.on{background: red; color: #fff;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<body>
<div id="app" v-cloak>
<!-- 我這判斷 下標(biāo)，是測(cè)試使用的，建議大家判斷的時(shí)候 改成 tab1... 這種-->
<!-- 而且 我分別用不同的class類(lèi)名來(lái)區(qū)別內(nèi)容是否已更新，大家看的時(shí)候，可以查看代碼變化-->
<div class="aa" v-if="avlist==0">aaa內(nèi)容可以自行修改</div>
<div class="bb" v-else-if="avlist==1">內(nèi)容可以自行修改bbb</div>
<div class="cc" v-else-if="avlist==2">內(nèi)容可以自行修改ccc</div>
<div class="dd" v-else-if="avlist==3">內(nèi)容可以自行修改ddd</div>
<template v-for="(key,index) in list">
<div class="tab" :class="{'on':isclass[index]}" @click="handal(index)">{{key}}</div>
</template>
</div>
</body>
js部分
<script>
var vm = new Vue({
el:"#app",
data:{
list:['tab1','tab2','tab3','tab4'],
isclass:[true,false,false,false],//用來(lái)表示狀態(tài)，這個(gè)可以修改 也可以?xún)?yōu)化掉
avlist :0,
},
methods:{
handal:function(a){
this.avlist=a;
for(var i=0; i<this.isclass.length; i++){
this.isclass[i]=false;
this.isclass[a]=true;
}
}
},
})
</script>
這樣寫(xiě)的好處就是，可以在dom結(jié)構(gòu)中自行定義內(nèi)容，if判斷只是規(guī)定了某些內(nèi)容要不要顯示
使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
虛擬DOM是一種用JavaScript對(duì)象來(lái)描述真實(shí)DOM的技術(shù),通過(guò)diff算法實(shí)現(xiàn)高效的DOM更新,提高頁(yè)面性能,Vue通過(guò)render函數(shù)和VNode實(shí)現(xiàn)虛擬DOM,結(jié)合diff算法減少DOM操作,提升用戶(hù)體驗(yàn)2024-12-12
Vue文件的組織結(jié)構(gòu)不合理之優(yōu)化項(xiàng)目結(jié)構(gòu)詳解
在這篇博客中,我們將探討 Vue 文件組織結(jié)構(gòu)不合理的幾個(gè)常見(jiàn)問(wèn)題,并提供解決方案,以幫助開(kāi)發(fā)者創(chuàng)建更清晰、更高效的項(xiàng)目文件結(jié)構(gòu),希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了uniapp的生命周期,應(yīng)用生命周期是指應(yīng)用程序從啟動(dòng)到關(guān)閉的整個(gè)過(guò)程，包括應(yīng)用程序的啟動(dòng)、前后臺(tái)切換、退出等,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-10-10
Vue.js集成Word實(shí)現(xiàn)在線(xiàn)編輯功能
在現(xiàn)代Web應(yīng)用中,集成文檔編輯功能變得越來(lái)越常見(jiàn),特別是在協(xié)作環(huán)境中,能夠直接在Web應(yīng)用內(nèi)編輯Word文檔可以極大地提高工作效率,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成Word在線(xiàn)編輯功能,需要的朋友可以參考下2024-08-08
VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能實(shí)例
這篇文章主要給大家介紹了關(guān)于VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能的相關(guān)資料,html5-qrcode是輕量級(jí)和跨平臺(tái)的QR碼和條形碼掃碼的JS庫(kù),集成二維碼、條形碼和其他一些類(lèi)型的代碼掃描功能,需要的朋友可以參考下2023-08-08
如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯(不使用v-if、v-else)
這篇文章主要給大家介紹了關(guān)于如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯的相關(guān)資料,不使用v-if、v-else,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09