vue实现选项卡效果

html:

      
        
  
            
  
                
  
                    {{tab.name}}  
                
  
            
  
  
            
  
                
这里是HTML教程
  
                
欢迎来到CSS模块
  
                
嗨，这里是Vue
  
            
  
        
  
     

js:

export default {
    data() {  
                tabsName: [{  
                    name: "HTML",  
                    isActive: true  
                }, {  
                    name: "CSS",  
                    isActive: false  
                }, {  
                    name: "Vue",  
                    isActive: false  
                }],  
                active: false  
            },  
            methods: {  
                tabsSwitch: function(tabIndex) {  
  
                    var tabCardCollection = document.querySelectorAll(".tab-card"),  
                        len = tabCardCollection.length;  
  
                    for(var i = 0; i < len; i++) {  
                        tabCardCollection[i].style.display = "none";  
                        this.tabsName[i].isActive = false;  
                    }  
                    this.tabsName[tabIndex].isActive = true;  
                    tabCardCollection[tabIndex].style.display = "block";  
                }  
            } 
}

css:

查看原文请点击