vue中的v-html指令

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 官网