如何在 nuxt 或 vue 中的绑定内添加 html 元素

Question

正如标题所述，我想尝试<br />在数据绑定中添加一个 html 元素，但我做不到，我很困惑如何正确做

假设我有这段文字I like to playing games，我想像<br />这样添加I like playing <br /> games，听起来很简单，对吧？但我无法在数据绑定中执行此操作。

这是我的代码：

<aqua-text
 class="text-position"
 :b-section-title="'I like to playing' + <br /> + 'games'"
 :description="
 'Game is fun after all'
 "
/>

看起来像这样<aqua-text>：

<template>
  <div>
    <h1>{{ bSectionTitle}}</h1>

    <h2 class="bold">
      {{ description}}
    </h2>
  </div>
</template>

<script>
export default {
  props: {
    bSectionTitle: {
      type: [String]
    },
    description: {
      type: [String]
    },
  }
};
</script>

有人可以帮我解决这个问题并解释我在这里错在哪里吗？

Answer 1

代替

<h1>{{ bSectionTitle}}</h1>

这样：

<h1 v-html="bSectionTitle"></h1>

他们在文档中说：

双胡子将数据解释为纯文本，而不是 HTML。为了输出真正的 HTML，您需要使用 v-html 指令

但请注意：

在网站上动态渲染任意 HTML 可能非常危险，因为它很容易导致 XSS 漏洞。仅对受信任的内容使用 HTML 插值，而不要对用户提供的内容使用 HTML 插值。

如果您需要呈现用户提供的内容，请在将内容传递给之前使用任何 html sanitizerv-html