vue实现点击切换

Vue 实现点击切换功能

在 Vue 中实现点击切换功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-if 和 v-else 指令

通过条件渲染实现点击切换显示不同内容：

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-if="isShow">内容1</div>
    <div v-else>内容2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow
    }
  }
}
</script>

使用 v-show 指令

v-show 通过 CSS 的 display 属性控制元素显示/隐藏：

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-show="isShow">显示的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow
    }
  }
}
</script>

动态组件切换

通过 component 标签和 is 属性实现组件切换：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用 CSS 类名切换

通过绑定 class 实现样式切换：

<template>
  <div>
    <button @click="toggleClass">切换样式</button>
    <div :class="{ active: isActive }">内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleClass() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

多个选项切换

实现多个选项之间的切换：

<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab" 
      @click="currentTab = tab"
      :class="{ active: currentTab === tab }"
    >
      {{ tab }}
    </button>
    <div v-show="currentTab === 'Tab1'">Tab1内容</div>
    <div v-show="currentTab === 'Tab2'">Tab2内容</div>
    <div v-show="currentTab === 'Tab3'">Tab3内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Tab1', 'Tab2', 'Tab3'],
      currentTab: 'Tab1'
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，v-if/v-else 适合完全不同的内容切换，v-show 适合频繁切换的场景，动态组件适合组件间的切换，类名绑定适合样式变化，多选项切换适合复杂的选项卡场景。