vue实现toggle
Vue 实现 Toggle 功能
在 Vue 中实现 toggle（切换）功能可以通过多种方式完成，以下是几种常见的实现方法：
使用 v-model 和计算属性
通过 v-model 绑定一个布尔值，结合计算属性或方法实现切换功能：
<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>使用 v-show 替代 v-if
如果切换的内容需要频繁显示/隐藏，使用 v-show 性能更好（仅切换 CSS 的 display 属性）：
<template>
<button @click="isActive = !isActive">Toggle</button>
<p v-show="isActive">内容显示</p>
</template>
<script>
export default {
data() {
return {
isActive: false
};
}
};
</script>使用自定义组件封装 Toggle
如果需要复用 toggle 逻辑，可以封装为组件：
<template>
<div>
<slot name="button" :toggle="toggle" :isActive="isActive">
<button @click="toggle">Toggle</button>
</slot>
<slot name="content" v-if="isActive"></slot>
</div>
</template>
<script>
export default {
data() {
return {
isActive: false
};
},
methods: {
toggle() {
this.isActive = !this.isActive;
}
}
};
</script>使用时：
<template>
<Toggle>
<template #button="{ toggle, isActive }">
<button @click="toggle">{{ isActive ? '隐藏' : '显示' }}</button>
</template>
<template #content>
<p>动态内容</p>
</template>
</Toggle>
</template>使用 Vue 3 Composition API
在 Vue 3 中，可以通过 ref 和 setup 更简洁地实现：
<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>动画过渡效果
如果需要添加动画效果，可以使用 Vue 的 <transition> 组件：
<template>
<button @click="isActive = !isActive">Toggle</button>
<transition name="fade">
<p v-if="isActive">内容显示</p>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>以上方法涵盖了从基础到进阶的 toggle 实现方式，可根据具体需求选择合适方案。
