vue2.0實現(xiàn)的tab標(biāo)簽切換效果（內(nèi)容可自定義）示例

更新時間：2019年02月11日 10:36:53 作者：xiaoshulin520

這篇文章主要介紹了vue2.0實現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實例形式分析了vue.js實現(xiàn)內(nèi)容可自定義的tab點擊切換功能相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了vue2.0實現(xiàn)的tab標(biāo)簽切換效果。分享給大家供大家參考，具體如下：

這里利用vue2.0 實現(xiàn)tab標(biāo)簽切換效果比較實用

初學(xué)vue，練習(xí)寫了一個demo 網(wǎng)上有很多同樣的例子，但都只是改text數(shù)據(jù)，如果我想加入圖片或者復(fù)雜的dom結(jié)構(gòu)就不實用，今天這個就剛好可以。

先上代碼：

html部分【記得引入vue文件哦】

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.dbjr.com.cn vue2.0 實現(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)，是測試使用的，建議大家判斷的時候 改成 tab1... 這種-->
        <!-- 而且 我分別用不同的class類名來區(qū)別內(nèi)容是否已更新，大家看的時候，可以查看代碼變化-->
         <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],//用來表示狀態(tài)，這個可以修改 也可以優(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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：