Vue 19 v-html

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 代码。