vue 实现vshow
Vue 实现 v-show
在 Vue 中，v-show 是一个常用的指令，用于根据条件控制元素的显示或隐藏。与 v-if 不同，v-show 不会移除 DOM 元素，而是通过 CSS 的 display 属性切换元素的可见性。
基本用法
v-show 接收一个布尔值，当值为 true 时显示元素，为 false 时隐藏元素。以下是一个简单的示例：
<template>
<div>
<button @click="toggle">切换显示</button>
<p v-show="isVisible">这段文字会根据条件显示或隐藏</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
}
};
</script>与 v-if 的区别
v-show通过 CSS 的display: none隐藏元素，DOM 仍然存在。v-if会根据条件动态添加或移除 DOM 元素，适合频繁切换的场景性能较差。
动态绑定
v-show 可以绑定动态表达式，例如：
<template>
<div>
<p v-show="user.age >= 18">成年人内容</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
age: 20
}
};
}
};
</script>结合计算属性
可以使用计算属性动态控制 v-show 的显示逻辑：
<template>
<div>
<p v-show="isAdult">成年人内容</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
age: 20
}
};
},
computed: {
isAdult() {
return this.user.age >= 18;
}
}
};
</script>性能优化
由于 v-show 只是切换 CSS 属性，适合频繁切换的场景。如果需要初始渲染时条件为假且不占用 DOM，可以使用 v-if。
注意事项
v-show不支持<template>标签。- 如果条件逻辑复杂，建议使用计算属性或方法封装。
