当前位置：首页 > VUE

vue实现toggle

2026-01-07 20:13:27VUE

Vue 实现 Toggle 功能

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

使用 v-model 和 v-on

通过 v-model 绑定数据，结合 v-on 监听事件实现切换。

<template>
  <button @click="toggle">Toggle</button>
  <p v-if="isActive">内容显示</p>
</template>

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

使用计算属性

通过计算属性动态切换状态，适合需要复杂逻辑的场景。

<template>
  <button @click="toggle">Toggle</button>
  <p v-if="isActive">内容显示</p>
</template>

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

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 ref 和 setup 方法实现 toggle。

<template>
  <button @click="toggle">Toggle</button>
  <p v-if="isActive">内容显示</p>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isActive = ref(false)

    const toggle = () => {
      isActive.value = !isActive.value
    }

    return {
      isActive,
      toggle
    }
  }
}
</script>

使用 v-show 替代 v-if

如果需要频繁切换显示/隐藏，v-show 比 v-if 更高效。

<template>
  <button @click="toggle">Toggle</button>
  <p v-show="isActive">内容显示</p>
</template>

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

动态切换样式

可以通过动态绑定 class 或 style 实现样式切换。

<template>
  <button @click="toggle">Toggle</button>
  <p :class="{ active: isActive }">内容显示</p>
</template>

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

<style>
.active {
  color: red;
}
</style>

以上方法可以根据具体需求选择使用，适用于大多数 toggle 场景。

vue实现toggle