v-pre 跳过编译

最后更新：2026-10-22

v-pre 跳过该元素及其子元素的编译：原样输出双大括号等模板语法，用于展示模板代码本身。

📝 语法

<span v-pre>{{ 这里不会被编译 }}</span>
<code v-pre>{{ msg }}</code>

expression	无表达式

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

页面显示「原样显示：{{ msg }}」——双大括号不被替换。

ℹ️ 说明 写教程、文档或演示模板语法时用它避免插值被替换。

💡 提示 v-pre 对子节点全部生效，可加在整个代码块容器上。

⚠️ 注意 v-pre 元素内的指令（v-if 等）同样不会被处理。

更多案例即将上线。

Q 它的典型用途是什么？

A 写教程或文档时展示模板语法本身，避免 {{ }} 被替换。

Q 子元素里的指令会执行吗？

A 不会，v-pre 让整棵子树跳过编译。

Q 和 v-once 有什么区别？

A v-pre 是根本不编译（保留源码写法）；v-once 编译一次后不再更新。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。