vue实现显示隐藏功能
使用 v-show 指令
v-show 是 Vue 提供的指令，通过切换元素的 display CSS 属性来控制显示和隐藏。适用于频繁切换显示状态的场景。
<template>
<div>
<button @click="toggleVisibility">切换显示</button>
<div v-show="isVisible">内容区域</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
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: true
}
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
}
</script>动态绑定 class
通过动态绑定 class 来控制元素的显示隐藏，适合需要更复杂样式控制的场景。
<template>
<div>
<button @click="toggleVisibility">切换显示</button>
<div :class="{ 'hidden': !isVisible }">内容区域</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
}
</script>
<style>
.hidden {
display: none;
}
</style>使用计算属性
结合计算属性实现更复杂的显示逻辑，适用于需要根据多个条件判断显示状态的场景。
<template>
<div>
<button @click="toggleVisibility">切换显示</button>
<div v-if="shouldShow">内容区域</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
otherCondition: true
}
},
computed: {
shouldShow() {
return this.isVisible && this.otherCondition
}
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
}
</script>组件间通信实现
在父组件中控制子组件的显示隐藏，适用于组件化开发的场景。
<!-- 父组件 -->
<template>
<div>
<button @click="toggleChild">切换子组件</button>
<ChildComponent v-if="showChild" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
showChild: true
}
},
methods: {
toggleChild() {
this.showChild = !this.showChild
}
}
}
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>子组件内容</div>
</template>
