如何让Vue模态框页面加载时完全隐藏，仅点击按钮后显示

问题根因 #

页面加载过程中，Vue 实例尚未完成初始化挂载时，v-if 指令还未生效，模态框对应的 HTML 片段会被浏览器直接渲染出来，等 Vue 初始化完成后才会根据 showDetailModal: false 的配置隐藏元素，这个极短的时间差就导致了空内容闪现。你之前直接给 CSS 加固定 display: none 后模态框无法弹出，是因为静态 CSS 优先级和你写的冗余样式控制逻辑冲突导致的。

最优解决方案：使用 v-cloak 指令 #

这是 Vue 官方专门用来解决初始化前内容闪现问题的方案，改造成本极低：

1. 先在你的 CSS 中添加全局规则：

[v-cloak] {
  display: none !important;
}

2. 给模态框外层元素加上 v-cloak 属性，同时删掉冗余的内联样式绑定（你已经用了 v-if 控制元素是否渲染，不需要额外绑定 display 样式，二者功能重复反而容易出问题）：
   修改后的模态框代码如下：

<div class="modal-vue" v-if="showDetailModal" v-cloak>
  <!-- overlay to help with readability of modal -->
  <div class="overlay" @click="showDetailModal = false"></div>

  <!-- Modal for detail on table cell click event -->
  <div class="modal">
    <button class="close" @click="showDetailModal = false">x</button>
    <h3>Testing</h3>
  </div>
</div>

原理说明 #

Vue 实例初始化完成后会自动移除所有元素上的 v-cloak 属性，初始化完成前这个属性会让元素保持隐藏，既解决了页面加载阶段的闪现问题，也完全不影响后续点击按钮触发模态框显示的逻辑。

可选方案：默认隐藏+动态类绑定 #

如果你不想用 v-cloak，也可以通过样式优先级控制实现：

1. 给模态框加默认隐藏和显示状态的样式规则：

.modal-vue {
  display: none;
}
.modal-vue.is-show {
  display: block;
}

2. 用动态类绑定控制显示状态即可：

<div class="modal-vue" :class="{'is-show': showDetailModal}">

内容的提问来源于stack exchange，提问作者Geoff_S