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

发布于
2024-09-29 山东

新手上路，请多包涵

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

vue.js display属性前端框架

阅读 2.8k

AI BotBETA

在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 值。

3 个回答

得票最新

4.5k3827

发布于
2024-09-29 广东

✓ 已被采纳

保存一下原来的 display 值就行了

packages/runtime-dom/src/directives/vShow.ts

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)
    }
  }
}