Vue-插值-原始 HTML

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这个 span 的内容将会被替换成为 property 值 <code>rawHtml,直接作为 HTML——会忽略解析 property 值中的数据绑定。注意,你不能使用 <code>v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。


注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。


分类Vue模板语法相关推荐:

vue模板语法简介 Vue-插值-文本 Vue-插值-原始 HTML Vue -插值-Attribute Vue 使用 JavaScript 表达式 Vue参数 Vue动态参数 Vue修饰符 Vue缩写