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í)寫了一個(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.dbjr.com.cn 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)區(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è)可以修改 也可以優(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>
這樣寫的好處就是，可以在dom結(jié)構(gòu)中自行定義內(nèi)容，if判斷只是規(guī)定了某些內(nèi)容要不要顯示
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了詳解VUE單頁(yè)應(yīng)用骨架屏方案，詳細(xì)的介紹了什么是骨架屏以及是憲法方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Vue SPA單頁(yè)面的應(yīng)用和對(duì)比
單頁(yè)面是指整個(gè)應(yīng)用程序只有一個(gè)唯一完整的 HTML 頁(yè)面，而其它所謂的頁(yè)面，其實(shí)都是組件片段而已，切換頁(yè)面也只是切換一個(gè) HTML 中顯示不同的組件片段。在今后所有的開(kāi)發(fā)項(xiàng)目都是單頁(yè)面應(yīng)用2022-08-08
解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題
這篇文章主要介紹了解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue中如何獲取本地IP地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue項(xiàng)目nginx二級(jí)域名配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了前端Vue自定義地址展示地址選擇地址管理組件的示例詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問(wèn)題解析
在近期開(kāi)發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來(lái)對(duì)頁(yè)面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問(wèn)題,無(wú)法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
vue中實(shí)現(xiàn)多頁(yè)面應(yīng)用方式
這篇文章主要介紹了vue中實(shí)現(xiàn)多頁(yè)面應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue使用Office?Web實(shí)現(xiàn)線上文件預(yù)覽
這篇文章主要為大家介紹了vue使用微軟的開(kāi)發(fā)接口Office?Web,實(shí)現(xiàn)線上文件預(yù)覽,預(yù)覽word，excel，pptx，pdf文件,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07