开发问题记录：v-if/v-show与display的互斥

场景描述：
app.vue
component:
- StepOne.vue
- StepTwo.vue

StepOne.vue
<template>
	<div>
		<div>步骤一标题</div>
		<div>步骤一内容</div>
	</div>
</template>

StepTwo.vue
<template>
	<div style="display: flex;">
		<div>步骤二标题</div>
		<div>步骤二内容</div>
	</div>
</template>

app.vue
<template>
	<div>
		<StepOne v-if="visible"/>
		<StepTwo v-else/>
	</div>
</template>

现象是：两个组件全部展示了，开始有点摸不着头脑，但是捋了一下代码，感觉是这个display导致的，去掉之后果然就很奶思。

所以在StepTwo.vue 的最外层的div的style里面的display去掉，或者在外面包一层div，总之组件的最外层标签给定行内样式中有display，会影响组件的v-if使用。