如何使用 Vue.js 用 HTML 代码插入文本

Question

我的 MySQL 中有一些带有 HTML 代码的数据。

例子：

<b>William Shakespeare</b> was an English poet.

我需要将此文本插入 Vue.js 组件中。

我的代码是：

  mounted() {
    axios
      .get(MY API)
      .then(response => (this.author = response.data))
      .catch(error => error("error"));
  }

进而：

<p class="card-text">
    {{author.description}}
</p>

问题是描述中的标签没有被解释，它显示了 HTML 标签。

Answer 1

在你的段落中使用v-html指令：

<p class="card-text" v-html="author.description" />

author.description但如果要包含用户提供的数据，请务必小心 XSS 攻击的可能性。