Vue.js实现tab切换效果

利用Vue实现简易tab切换效果

1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一些简单的特效。

1.2 实现思路是点击上方的标题，下方的内容随之发生改变，上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应，基予两个模块若下标相同是一个内容实现的。

1.3 tab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构

 
"app">
        
class="tab-tilte">
            
标题一
            
标题二
            
标题三
            
标题四
        
        
class="tab-content">
            
内容一
            
内容二
            
内容三
            
内容四
        
    

1.4 tab切换第二步写上对应的css样式

1.5tab切换第三步引入vue实现

    
"app">
        
class="tab-tilte">
            
"cur=0" :class="{active:cur==0}">标题一
            
"cur=1" :class="{active:cur==1}">标题二
            
"cur=2" :class="{active:cur==2}">标题三
            
"cur=3" :class="{active:cur==3}">标题四
        
        
class="tab-content">
            
"cur==0">内容一
            
"cur==1">内容二
            
"cur==2">内容三
            
"cur==3">内容四
        
    
    
    

效果图：

 

 

1.6tab切换效果改进与优化

（1） 以上代码看起来似乎很简单容易懂，而且效果也能实现，但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值，因此我们有必要改进一下代码的写法。
（2）利用vue提供的v-for指令遍历得到索引和值 如下所示：

"app">
    
    
class="tab-tit">
        
for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}
    
    
class="tab-content">
        
for="(m,index) in tabMain" v-show="cur==index">{{m}}
    

    

最终效果图如下：