Vue 将后台传过来的带html字段的字符串转换为 HTML

要将后台传过来的带html字段的字符串转换为 HTML，可以借助 Vue 的指令 v-html。该指令能够将一个字符串解析为 HTML。下面将详细讲解如何使用。

准备工作

在使用 v-html 指令之前，需要先引入 Vue 库，如果是使用 Vue CLI 创建的项目，则已自动安装。

使用方法

在模板中使用 v-html 指令可将后台传过来的带html字段的字符串转换为 HTML。

举例来说，如果后台传过来以下字符串："<h1>Hello world!</h1>"，可以这样在模板中使用 v-html 指令：

<div v-html="htmlString"></div>

在 JavaScript 中，将字符串数据保存到 data 中：

data() {
  return {
    htmlString: "<h1>Hello world!</h1>"
  };
}

最终的效果是将该字符串渲染成一段 HTML：

<div>
  <h1>Hello world!</h1>
</div>

除了简单的字符串转换，v-html 指令也可以用于转换包含多种 HTML 标记的字符串。例如，下面的代码将会被正确地转换成 HTML 代码：

<div v-html="multiHtmlString"></div>

在 JavaScript 中：

data() {
  return {
    multiHtmlString: `<div>
  <h1>Hello</h1>
  <p>
    This is a paragraph with <strong>some bold text</strong>.
  </p>
</div>`
  };
}

而最终渲染出的 HTML 是：

<div>
  <h1>Hello</h1>
  <p>
    This is a paragraph with <strong>some bold text</strong>.
  </p>
</div>

需要注意的是，由于 v-html 指令的作用是将字符串作为 HTML 渲染，因此应该谨慎使用该指令。如果后台传来的 HTML 字符串包含恶意代码，可能会导致安全问题。因此，在使用 v-html 指令时，一定要确认该 HTML 内容的来源是可信任的。

尽管如此，在缩略图、预览等场景下 v-html 仍然非常有用。通常，这种情况下所展示出来的内容是由内部编辑器，例如 Markdown 编辑器所构建而来，足以让该 HTML 内容可信赖。

至此，我们已经掌握了如何使用 v-html 指令将后台传过来的带html字段的字符串转换为 HTML。