Teach you step by step how to use Vue to implement a tab bar switching function

With the continuous development of front-end technology, Vue has become one of the most popular JavaScript frameworks. The emergence of Vue makes front-end development simpler and more efficient. In Vue, we can build a complex interface through directives and components. Among them, tab bars often appear in the navigation bar or tabs of websites. This article will introduce how to use Vue to implement tab bar switching.

1. Create a Vue project

First you need to install the Vue CLI and execute the following command:

npm install -g vue-cli

Then create a new project and execute the following command:

vue init webpack my-tab

This command will create a new project named "my-tab". After you confirm that the project is created successfully, please enter the project folder.

2. Create tab components

In the src/components directory, create a folder named "tabs", and create two tab lists on the left and the content area on the right. The subcomponents are named "tab-header" and "tab-pane" respectively.

In the tab-header component, we need to use the v-for directive to loop through the tab list. The code is as follows:

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}">
        <a href="#" @click="changeTab(index)">{{tab}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentIndex = index
        this.$emit('tab-change', index)
      }
    }
  }
</script>

This component uses props to accept the tab list data passed from the parent component, and uses the v-for instruction to loop the list, change the value of currentIndex according to the currently selected tab, and trigger A custom event called "tab-change".

In the tab-pane component, we need to decide which content area should be rendered based on the value of currentIndex. The code is as follows:

<template>
  <div>
    <div v-for="(pane, index) in panes" :key="index" v-show="currentIndex === index">
      {{ pane }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['panes', 'currentIndex'],
  }
</script>

This component accepts two props, panes and currentIndex, uses the v-for instruction to loop through panes, and displays the corresponding content area according to the value of currentIndex. These content areas can be any elements, such as p tags, img tags, etc.

3. Use the tab component in the parent component

In the parent component, we need to pass the data to the tab-header and tab-pane components, and determine the user selection based on the value of currentIndex tab.

<template>
  <div>
    <tab-header :tabs="tabs" @tab-change="tabChange"></tab-header>
    <tab-pane :panes="panes" :currentIndex="currentIndex"></tab-pane>
  </div>
</template>

<script>
  import TabHeader from './tabs/tab-header'
  import TabPane from './tabs/tab-pane'

  export default {
    data () {
      return {
        tabs: ['Tab1', 'Tab2', 'Tab3'],
        panes: ['Content1', 'Content2', 'Content3'],
        currentIndex: 0
      }
    },
    components: {
      TabHeader,
      TabPane
    },
    methods: {
      tabChange (index) {
        this.currentIndex = index
      }
    }
  }
</script>

In the parent component, we need to import the tab-header and tab-pane components respectively and register them as local components. In addition, we also need to define three data items, tabs, panes and currentIndex, and assign values ​​as needed. Finally, we use the tab-header and tab-pane components in the template and bind custom events.

This is a simple example that you can change and extend according to your needs. At this point, the process of using Vue to switch tabs has been completed.

The above is the detailed content of Teach you step by step how to use Vue to implement a tab bar switching function. For more information, please follow other related articles on the PHP Chinese website!