How to switch vue tabs

In Vue.js, use tab switching to easily navigate between different content. Tabs usually consist of header and content panels, and users can select different panels by selecting the header. In Vue.js, we can use the v-if directive and the isActive attribute to implement tab switching. Here is a basic tab component example:

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: tab.isActive }" @click="selectedTab = tab">
        {{ tab.name }}
      </li>
    </ul>

    <div v-for="(tab, index) in tabs" :key="index" v-if="tab.isActive">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [
          { name: 'Tab 1', content: 'Content for Tab 1', isActive: true },
          { name: 'Tab 2', content: 'Content for Tab 2', isActive: false },
          { name: 'Tab 3', content: 'Content for Tab 3', isActive: false }
        ]
      }
    },
    
    computed: {
      selectedTab() {
        return this.tabs.find(tab => tab.isActive);
      }
    },
    
    methods: {
      selectTab(tab) {
        this.tabs.forEach(tab => tab.isActive = false);
        tab.isActive = true;
      }
    }
  }
</script>

In the above code, we first define an array tabs containing tab information. Each tab has a name, a content and a boolean value. isActive, used to determine whether the tab is selected. We also define a computed attribute selectedTab, which is used to obtain the currently selected tab object.

Then, in the template, we use the v-for directive to render out the headers of all tabs and determine whether the current tab is selected based on the isActive attribute. We also added a @click event listener to the header element, which calls the selectTab method and passes the current tab object as a parameter.

In the content panel section, we again use the v-for directive to render the content of all tabs, and use the v-if directive to determine whether the current panel should be displayed based on the isActive attribute.

Finally, in the methods object, we define the selectTab method, which is used to update the status of the tab when the user clicks the tab header. This method first sets the isActive property of all tabs to false, and then sets the isActive property of the selected tab to true.

Using the above code, you can quickly implement a tab component, but this is just a basic implementation. You can change and extend it according to your own needs, such as adding animation effects, slot content, etc.

The above is the detailed content of How to switch vue tabs. For more information, please follow other related articles on the PHP Chinese website!