Vue实现简单选项卡效果

本文实例为大家分享了Vue实现简单选项卡效果的具体代码，供大家参考，具体内容如下

效果图

1.头部选项卡

点击切换下标ID 传递一个参数回去，active绑定选中样式

        

            

                
 {{item.title}}
            
        

2.完整HTML

默认使用V-show来切换，获取盒子下标，没有dom操作

当然，Vue官方文档也不推荐V-if和V-for同时使用

        

            

                
 {{item.title}}
            
        
        

            
{{item.content}}
        

3.Vue

下标默认为0

4.完整代码

 

 

    
    
    
    
    


 

    

        

            

                
 {{item.title}}
            
        
        

            
{{item.content}}
        
    
 
 
    

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。