在使用 uni-app 进行开发时，我们经常会使用 v-show 指令来控制元素的显示和隐藏。然而，有时候由于 CSS 的原因，使用 v-show 可能无法正常显示，导致我们无法达到预期的效果。

让我们来看一下下面的示例代码：

<template>
	<view class="page">
		<view>CSS 导致 v-show 无法正常显示</view>
		<view>当使用 v-show 隐藏元素时，元素的样式会被修改为 display: none;。如果使用其他 CSS 样式来覆盖或修改这个属性可能会导致无法正确显示。</view>
		<view v-show="show">
			<button @click="showToggle">关闭</button>
		</view>
		<view v-show="!show" class="btn-on">
			<button @click="showToggle">开启</button>
		</view>
	</view>
</template>

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


<style lang="less">
.page {
	.btn-on {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
</style>

在上述代码中，我们尝试使用 v-show 指令来控制按钮的显示和隐藏。当点击按钮时，通过调用 showToggle 方法来切换 show 的值，从而切换按钮的显示状态。

然而，我们可能会遇到一个问题，即按钮在切换状态时无法正确显示。这是由于在样式中对 display 属性进行了修改，导致无法达到预期的效果。

非预期的运行截图：

解决这个问题的一种方法是避免直接修改 display 属性，而是通过其他方式来控制元素的显示和隐藏。在 uni-app 中，我们可以使用 v-if 指令来代替 v-show，因为 v-if 会完全从 DOM 中移除元素，而不是仅仅隐藏它。

下面是修改后的代码：

<template>
	<view class="page">
		<view>CSS 导致 v-show 无法正常显示</view>
		<view>当使用 v-show 隐藏元素时，元素的样式会被修改为 display: none;。如果使用其他 CSS 样式来覆盖或修改这个属性可能会导致无法正确显示。</view>
		<view v-if="show">
			<button @click="showToggle">关闭</button>
		</view>
		<view v-else class="btn-on">
			<button @click="showToggle">开启</button>
		</view>
	</view>
</template>

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

<style lang="less">
.page {
	.btn-on {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
</style>

在修改后的代码中，我们将 v-show 指令替换为 v-if 指令，并使用 v-else 来控制按钮的显示和隐藏。这样，当条件满足时，相关的按钮元素会被添加到 DOM 中，而当条件不满足时，相应的按钮元素会从 DOM 中移除。

通过这种方式，我们可以避免直接修改 display 属性，从而解决了由于 CSS 的原因导致 v-show 无法正常显示的问题。

希望本文能帮助你理解在 uni-app 中使用 v-show 时可能遇到的问题，并提供了一种解决方案来达到预期的效果。