vue 实现点击显示
Vue 实现点击显示功能
在 Vue 中实现点击显示功能可以通过多种方式实现，常见的方法包括使用 v-show、v-if 指令或通过动态绑定类名控制元素的显示与隐藏。
使用 v-show 指令
v-show 通过控制 CSS 的 display 属性实现显示与隐藏，适合频繁切换的场景。
<template>
<div>
<button @click="toggleVisibility">点击显示/隐藏</button>
<div v-show="isVisible">显示的内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
</script>使用 v-if 指令
v-if 会直接销毁或重建 DOM 节点，适合不频繁切换的场景。
<template>
<div>
<button @click="toggleVisibility">点击显示/隐藏</button>
<div v-if="isVisible">显示的内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
</script>动态绑定类名
通过动态绑定类名，结合 CSS 控制显示与隐藏。
<template>
<div>
<button @click="toggleVisibility">点击显示/隐藏</button>
<div :class="{ 'hidden': !isVisible }">显示的内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
</script>
<style>
.hidden {
display: none;
}
</style>使用 Vue 3 的 setup 语法（Composition API）
在 Vue 3 中，可以通过 ref 和 setup 语法实现。
<template>
<div>
<button @click="toggleVisibility">点击显示/隐藏</button>
<div v-show="isVisible">显示的内容</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const isVisible = ref(false);
const toggleVisibility = () => {
isVisible.value = !isVisible.value;
};
return { isVisible, toggleVisibility };
}
};
</script>实现点击显示下拉菜单
结合事件和样式，实现点击显示下拉菜单。
<template>
<div>
<button @click="toggleMenu">点击显示菜单</button>
<ul v-show="isMenuVisible">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
isMenuVisible: false
};
},
methods: {
toggleMenu() {
this.isMenuVisible = !this.isMenuVisible;
}
}
};
</script>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
</style>以上方法可以根据实际需求选择使用，v-show 适合频繁切换的场景，v-if 适合条件渲染，动态类名适合需要复杂样式控制的场景。
