Vue中如何实现v-show对display属性的控制与兼容？

小白请教问题，在vue中我们都知道v-show的显示与隐藏是通过控制display属性来实现，我在这里有一个不明白的地方，假如我们给元素A添加了v-show并指定了元素的默认布局时弹性盒即display:flex，此时当v-show=true时vue是如何避免这种对于display属性的冲突的呢？
我在这个问题上不是很明白，还请大佬指教一下
最好有部分代码片段的解析，多谢各位大佬

阅读 1.6k

在Vue中，v-show 指令的确是通过修改元素的 display CSS 属性来控制元素的显示与隐藏的。但是，当元素本身在CSS中已经有了其他 display 属性值（如 display: flex），Vue的 v-show 指令并不会完全覆盖这个值，而是在需要显示元素时保持这个值，在需要隐藏元素时将其设置为 none。

这里的关键是Vue会智能地处理这种情况，确保 v-show 的行为符合预期。当 v-show 的表达式为 true 时，Vue不会修改元素的 display 属性（如果它已经被设置为除 none 之外的其他值），因为元素已经是可见的。当 v-show 的表达式为 false 时，Vue会将 display 设置为 none，从而隐藏元素。

下面是一个简单的示例，说明如何在Vue中使用 v-show 并保持元素的 display: flex 属性：

<template>
  <div id="app">
    <!-- 使用v-show控制显示隐藏，同时元素保持其display: flex样式 -->
    <div class="flex-container" v-show="isVisible">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true, // 控制v-show的布尔值
    };
  },
};
</script>

<style>
.flex-container {
  display: flex; /* 默认设置display为flex */
  justify-content: space-between;
  border: 1px solid black;
}

.flex-item {
  padding: 10px;
  background-color: lightblue;
}
</style>

在这个例子中，.flex-container 有一个 display: flex 的样式。当 isVisible 为 true 时，.flex-container 保持其 display: flex 属性，并正常显示。当 isVisible 变为 false 时，Vue将 .flex-container 的 display 设置为 none，从而隐藏该元素。当 isVisible 再次变为 true 时，.flex-container 的 display 将恢复为 flex，因为它在CSS中就是这样设置的。

因此，Vue的 v-show 指令并不会与元素已有的 display 属性（如 display: flex）冲突，而是会根据需要智能地切换 display: none 和元素原有的 display 值。

export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = { beforeMount(el, { value }, { transition }) { el[vShowOriginalDisplay] = el.style.display === 'none' ? '' : el.style.display // 保存原来的 display 值 if (transition && value) { transition.beforeEnter(el) } else { setDisplay(el, value) } } }

Vue中如何实现v-show对display属性的控制与兼容？

你尚未登录，登录后可以

Vue项目一个报错无法找到原因?

前端页面脚本更新时，如何让用户端，使用最新脚本？

solidjs中如何实现vue中的keep-alive功能？

给定两个节点，如何找出他们之间的所有路径？

如何在Vue自定义指令中防止中文拼音输入影响数字验证？

Element-UI el-table行编辑状态无法切换是为什么呢？

vue中如何更好地处理深度组件抛出的事件?