Vue-tab切换

CodePen预览

• 引入CSS文件和JS文件

• html代码

  
    
      
this is the content of About Us tab.
    
    
      
this is the content of About Our Culture tab.
    
    
      
this is the content of about About Our Vision tab.
    
  

• js代码

Vue.component('tabs', {
  template: `
    

      

        

          

            {{ tab.name }}
          
        
      
      

        
      
    
  `,
  data() {
    return {
      tabs: []
    };
  },
  created() {
    this.tabs = this.$children;
  },
  methods: {
    selectTab(selectedTab){
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name == selectedTab.name);
      });
    }
  }
});

Vue.component('tab', {
  props: {
    name: { required: true },
    selected: { default: false }
  },
  template: `
    

  `,
  data() {
    return {
      isActive: false
    }
  },
  computed: {
    href() {
      return '#' + this.name.toLowerCase().replace(/ /g, '-');
    }
  },
  mounted() {
    this.isActive = this.selected;
  }
});

new Vue({
  el: '#app'
});