vue选项卡切换图片一整个代码

在Vue.js中创建一个简单的图片轮播选项卡功能，你可以使用`v-if`和`v-show`指令以及模板的动态渲染来实现。这里是一个基本的示例：

<template>
  <div class="tab-container">
    <ul class="tabs">
      <li v-for="(tab, index) in tabs" :key="index">
        <button @click="activeTab = index">{{ tab.title }}</button>
      </li>
    </ul>
    <transition name="slide-fade">
      <img v-if="activeTab === tabIndex" :src="currentImage" alt="Slide Image">
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', image: 'image1.jpg' },
        { title: 'Tab 2', image: 'image2.jpg' },
        { title: 'Tab 3', image: 'image3.jpg' }
      ],
      activeTab: 0,
      tabIndex: null,
      currentImage: ''
    };
  },
  computed: {
    // 当activeTab变化时更新currentImage
    currentImage() {
      return this.tabs[this.activeTab].image;
    }
  },
  methods: {
    // 点击切换选项卡
    changeTab(index) {
      this.activeTab = index;
      this.tabIndex = index; // 更新当前激活的索引，用于过渡效果
    }
  },
  mounted() {
    this.tabIndex = this.activeTab; // 初始化过渡效果
  },
  beforeDestroy() {
    this.tabIndex = null; // 移除过渡效果后的清理
  },
  /* 添加动画过渡效果，比如 "slide-fade" */
  transitionRules: {
    slide-fade-enter-active,
    slide-fade-leave-active {
      transition: 0.5s ease;
    },
    slide-fade-enter,
    slide-fade-leave-to {
      transform: translateX(100%);
    }
  }
};
</script>

<style scoped>
.tabs button {
  cursor: pointer;
}
.slide-fade-enter-active, .slide-fade-leave-active {
  position: relative;
}
.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
}
</style>

这个例子中，我们有一个包含三个选项卡的数组，每个选项卡都有一个标题和对应的图片。当用户点击某个选项卡时，`changeTab`方法会被触发，同时改变`activeTab`的状态，使得相应的图片显示出来。