v-cloak使用异常：仅需隐藏指定div内容却隐藏后续内容，如何修复？

嘿，这个情况确实有点坑，按道理给单个div加v-cloak，不该影响到它外面的内容。咱们先捋清楚可能的原因，再给你对应的解决办法：

先找问题根源 #

大概率是这两个原因之一：

• 你的CSS规则写错了，不小心把隐藏范围扩大了；
• Vue实例的挂载范围太广，把div后面的内容也包含进去了，导致初始化前出现意外渲染。

针对性解决办法 #

1. 修正CSS规则，精准隐藏div内部内容 #

如果你只想隐藏div里的内容（而不是div本身），别直接给[v-cloak]设display: none——这样会把整个div都藏起来。应该改成只隐藏v-cloak元素的子元素：

[v-cloak] > * {
  display: none;
}

这样设置后，带v-cloak的div本身会正常显示，只有它里面的内容会在Vue加载完成前被隐藏，完全不会影响div外面的内容。

2. 检查Vue实例的挂载范围 #

确保你初始化Vue时，挂载的元素只包含需要Vue管理的部分，别把整个body或者包含后续内容的大容器当成挂载目标。比如如果你的div类名叫vue-container，那挂载代码应该像这样：

• Vue 2写法：

new Vue({
  el: '.vue-container',
  data: {
    // 你的数据
  }
})

• Vue 3写法：

const app = Vue.createApp({
  data() {
    return {
      // 你的数据
    }
  }
})
app.mount('.vue-container')

这样Vue只会处理这个容器内部的内容，不会干扰外面的元素。

3. 排查意外的样式影响 #

如果上面两步都没用，你可以在Vue加载完成前，打开浏览器的开发者工具，看看div后面的内容是不是被其他CSS规则意外隐藏了，或者有没有被误加了v-cloak属性。

正确示例参考 #

给你看个完整的正确写法，你可以对照调整：

<!-- 始终显示的内容 -->
<div class="vue-container" v-cloak>
  <!-- Vue加载前隐藏的内容 -->
  <p>{{ welcomeText }}</p>
</div>
<!-- 始终显示的内容 -->
<p>这是div后面的内容，不管Vue有没有加载都会显示</p>

[v-cloak] > * {
  display: none;
}

// Vue 2示例
new Vue({
  el: '.vue-container',
  data: {
    welcomeText: 'Vue加载完成啦！'
  }
})

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