v-html指令会将 span 的内容替换成 rawHtml 的属性值,直接作为 HTML 代码解析。但是会忽略解析属性值中的数据绑定,意味着会作为纯粹的 HTML 代码,而不是 Vue template 模板进行解析,如下:
<div id="app">
<span>{{msg}}</span>
<p>Using mustaches:{{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
new Vue({
el: '#app',
data: {
msg: 'message',
rawHtml: '<span style="color:red">This should be red {{msg}}.</span>',
},
});
# rawHtml内的插值并未被编译,而是以字符串的形式输出,其余数据绑定方式也会是一样。
Message: message
using mustacheds: <span style="color: red">This should be red {{msg}}</span>
using v-html directive: This should be red {{msg}}
注意: 不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。
你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值
参考:
vue 官网