当前位置：首页 > VUE

vue 实现点击切换

2026-01-17 09:47:59VUE

Vue 实现点击切换功能

在 Vue 中实现点击切换功能可以通过多种方式完成，常见的有切换布尔值、切换类名、切换样式或切换显示内容。以下是几种实现方法：

切换布尔值控制显示/隐藏

使用 v-if 或 v-show 指令结合布尔值实现点击切换显示和隐藏：

vue 实现点击切换

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <p v-if="isVisible">点击按钮切换显示这段文字</p>
  </div>
</template>

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

切换类名实现样式变化

通过动态绑定类名实现点击切换样式：

vue 实现点击切换

<template>
  <div>
    <button @click="toggleClass">切换样式</button>
    <p :class="{ active: isActive }">点击按钮切换这段文字的样式</p>
  </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 @click="nextState">切换状态</button>
    <p>{{ currentState }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      states: ['状态一', '状态二', '状态三'],
      currentIndex: 0
    };
  },
  computed: {
    currentState() {
      return this.states[this.currentIndex];
    }
  },
  methods: {
    nextState() {
      this.currentIndex = (this.currentIndex + 1) % this.states.length;
    }
  }
};
</script>

切换组件

通过动态组件 <component> 实现点击切换不同组件：

<template>
  <div>
    <button @click="toggleComponent">切换组件</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 {
      components: ['ComponentA', 'ComponentB'],
      currentIndex: 0
    };
  },
  computed: {
    currentComponent() {
      return this.components[this.currentIndex];
    }
  },
  methods: {
    toggleComponent() {
      this.currentIndex = (this.currentIndex + 1) % this.components.length;
    }
  }
};
</script>