Vue 中实现 Tab 切换功能

WLingL10

于 2024-12-24 20:00:00 发布

阅读量233

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/wll_03/article/details/144426474

<template>
  <div class="tabs">
    <button 
      v-for="(tab, index) in tabs" 
      :key="index" 
      @click="selectTab(index)" 
      :class="{ active: selectedIndex === index }"
    >
      {{ tab.name }}
    </button>

    <div class="tab-content">
      <slot :name="tabs[selectedIndex].name"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: 0,
      tabs: [
        { name: 'Tab1' },
        { name: 'Tab2' },
        { name: 'Tab3' }
      ]
    };
  },
  methods: {
    selectTab(index) {
      this.selectedIndex = index;
    }
  }
};
</script>

<style scoped>
.tabs button {
  padding: 10px;
  margin-right: 5px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}

.tabs button.active {
  background-color: #4CAF50;
  color: white;
}
</style>