Vue 如何渲染富文本？

We have already used templates extensively.We mainly use interprolation to display data and some directives to renderdata. Also, we can use the @ or v-on directive to listen to events that areemitted, such as clicks and input value changes.

我们已经广泛使用了模板。我们主要使用互斥来显示数据，并使用一些指令来渲染数据。此外，我们还可以使用 @ 或 v-on 指令来监听所发出的事件，如点击和输入值变化。

There is other useful syntax that we canuse to create templates with. One of them is displaying raw HTML with ourinterpolated expressions. By default, Vue 3 escapes all HTML entities so thatthey will be displayed as-is. The v-html directive lets us display HTML code asreal HTML rather than a plain text.

我们还可以使用其他有用的语法来创建模板。其中之一就是使用插值表达式显示原始 HTML。默认情况下，Vue 3 会转义所有 HTML 实体，以便按原样显示。v-html 指令可让我们将 HTML 代码显示为真正的 HTML，而不是纯文本。

For example, let’s write the followingcode:

例如，让我们编写以下代码：

Vue App

const App = { data() { return { // html 字符串 rawHtml: `hello world` }; } }; Vue.createApp(App).mount("#app");

Here, we set the rawHtml reactive propertyas the value of v-html, so that we can see the b tag being rendered as boldtext instead of the characters in raw form being rendered.

在这里，我们将 rawHtml 反应属性设置为 v-html，这样我们就能看到 b 标记被渲染为粗体文本，而不是渲染原始形式的字符。