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

作为标题状态，我想尝试在数据绑定中添加一个html元素

，但我做不好，我很困惑如何做对

假设我有这个文本

我喜欢玩游戏

，我想添加

这样的

我喜欢玩游戏

，听起来很简单，对吗？但我不能在数据绑定中正确执行此操作

这是我的代码：

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

这就是

看起来的样子：

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

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

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

{{bSectionTitle}}
{{description}}
导出默认值{
道具：{
标题：{
类型：[字符串]
},
说明：{
类型：[字符串]
},
}
};

有人能帮我解决这个问题并解释一下我的错误吗？

替换

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

{{bSectionTitle}

据此：

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

他们说：

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

但请注意：

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

---

如果您需要在将内容传递给

v-html

之前呈现用户提供的内容，感谢您，它可以工作，但是使用

v-html

时是否有任何缺点？是的。在文档中：“在您的网站上动态呈现任意HTML可能非常危险，因为它很容易导致XSS漏洞。只在受信任的内容上使用HTML插值，而不要在用户提供的内容上使用HTML插值。”因此，如果您要呈现未知内容，您需要使用HTML净化剂。哦，我忘记了一些事情，我能再问一次吗，只是为了确定一下？在不使用

v-html

的情况下，有没有什么迂回的方法可以做到这一点？

v-html

是最简单的vue原生方法。其他方式就不那么合法了。你不喜欢

v-html

中的什么？事实上，我喜欢它，因为它更容易使用，我只是对

XSS漏洞非常紧张

，但因为我只对文本使用

v-html

，我可以断定它仍然安全，对吗？只要我不在

input

tag中使用它？