v-html
是 Vue.js 模板语法中的一种指令,用于将数据渲染为HTML代码,并插入到指令所在的元素内部。它的用法是 v-html="expression"
,其中 expression
是一个 JavaScript 表达式,其返回值应该是一段 HTML 字符串。
例如,假设我们有一个 Vue 实例:
var app = new Vue({ el: '#app', data: { message: '<strong>Hello, Vue!</strong>' } });
然后在 HTML 模板中使用 v-html
指令,如下所示:
<div id="app"> <p v-html="message"></p> </div>
渲染后的 HTML 代码如下:
<div id="app"> <p><strong>Hello, Vue!</strong></p> </div>
需要注意的是,使用 v-html
可能会导致跨站脚本攻击(XSS),因为它会将数据中包含的 HTML 代码直接渲染到页面上,如果不对数据进行过滤或转义,可能会导致恶意代码的注入。因此,在使用 v-html
时一定要谨慎,确保只插入可信的、经过安全过滤的 HTML 代码。