v-cloak 隐藏未编译模板
最后更新：2026-10-22
v-cloak 隐藏未编译模板
v-cloak 在编译完成前保留该属性，配合 CSS 隐藏原始模板，避免首次加载时闪现 {{ }}。
| 分组 | 指令 |
|---|---|
| 类型 | 指令 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
[v-cloak] { display: none; }
<div v-cloak>{{ msg }}</div>⚙️ 参数
| expression | 无表达式 |
|---|
返回值：指令，无返回值
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
网络慢时先隐藏，Vue 挂载完成后显示最终文本，不会闪现双大括号。💡 要点
⚠️ 注意 必须自己写 CSS 规则 [v-cloak]{display:none}：v-cloak 本身不带样式。
ℹ️ 说明 只在没有构建步骤、用完整版 Vue（含编译器）的页面才需要；SFC 编译产物无此问题。
💡 提示 编译完成后 Vue 会自动移除该属性，样式随之失效。
🏷️ 相关指令
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 为什么必须自己写 CSS？
A v-cloak 只是一个标记属性，不带任何样式；[v-cloak]{display:none} 由你声明。
Q 现代项目还需要它吗？
A SFC + 打包的项目不需要（产物无未编译模板）；直接引 CDN 完整版 Vue 的页面才需要。
Q 编译完成后属性会自动移除吗？
A 会，Vue 挂载时移除 v-cloak，隐藏规则随之失效。
