How to use Vue and Element-UI to implement tab switching function

How to use Vue and Element-UI to implement the tab switching function

Vue and Element-UI are currently very popular front-end development frameworks. Their combination can provide our projects with rich functionality and beauty interface. The tab switching function is a common and practical function. In this article, we will learn how to use Vue and Element-UI to implement this function.

First of all, we need to introduce the related dependencies of Vue and Element-UI into the project. Enter the root directory of your project on the command line and execute the following command:

npm install vue
npm install element-ui

After the installation is complete, create a new Vue component in your project and name it TabSwitch.vue. In the template of this component, we use the el-tabs component of Element-UI to implement the display and switching functions of tabs.

<template>
  <div>
    <el-tabs v-model="activeIndex" @tab-click="handleTabClick">
      <el-tab-pane :label="item.label" :key="item.name" v-for="item in tabs" :name="item.name"></el-tab-pane>
    </el-tabs>
    <div v-show="activeIndex === 'home'" class="content">Home Page</div>
    <div v-show="activeIndex === 'about'" class="content">About Page</div>
    <div v-show="activeIndex === 'contact'" class="content">Contact Page</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 'home',
      tabs: [
        { name: 'home', label: '首页' },
        { name: 'about', label: '关于' },
        { name: 'contact', label: '联系我们' }
      ]
    };
  },
  methods: {
    handleTabClick(tab) {
      this.activeIndex = tab.name;
    }
  }
};
</script>

<style scoped>
.content {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}
</style>

In the above code, we use the tabs array to save the data of the tab page. Each tab page has a name and labelAttributes. activeIndexThe variable is used to record the currently selected tab. The v-model attribute and @tab-click event of the el-tabs component are used to bind activeIndex and handle tab clicks respectively. event.

In some codes of the tab page, we use Vue's conditional rendering instruction v-show to display the corresponding content based on the currently selected tab page.

Finally, we need to introduce and use this component in the project's entry file. In your project main file (for example main.js), add the following code:

// main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import TabSwitch from './TabSwitch.vue';

Vue.use(ElementUI);

new Vue({
  render: h => h(TabSwitch)
}).$mount('#app');

In the above code, we first introduce Vue and Element-UI, and then introduce the code we just introduced Defined TabSwitch component. Then use Vue.use(ElementUI) to register the Element-UI plug-in, and finally use new Vue() to create a Vue instance and use the TabSwitch component as a project The root component is mounted.

So far, we have completed the code writing to implement the tab switching function using Vue and Element-UI. You can see a component on the interface that contains tabs and content areas. When you click on different tabs, the corresponding content areas will be displayed.

The above are code examples and instructions for using Vue and Element-UI to implement the tab switching function. I hope this article is helpful to you, and I wish you success in developing projects using Vue and Element-UI!

The above is the detailed content of How to use Vue and Element-UI to implement tab switching function. For more information, please follow other related articles on the PHP Chinese website!