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

Posted 2023-02-23

【中文标题】如何在 nuxt 或 vue 中的绑定中添加 html 元素

【英文标题】：How to add html element inside binding in nuxt or vue

【发布时间】：2020-01-31 14:21:06

【问题描述】：

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

假设我有这个文本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>

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

【参考方案1】：

替换

<h1> bSectionTitle</h1>

通过这个：

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

在documentation 他们说：

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

但请注意：

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

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

【讨论】：

哇，谢谢它的工作原理，但是使用v-html 时有什么缺点吗？

是的。在文档中：“在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致 XSS 漏洞。仅在受信任的内容上使用 HTML 插值，而不是在用户提供的内容上。”所以，如果你想渲染未知的内容，你需要使用 html sanitizer。

哦，我忘了一件事，我可以再问一次以确认一下吗？有没有不使用v-html 的迂回方式来做到这一点？

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

其实我很喜欢它，因为它更容易使用，我只是对XSS Vulnerabilities 很紧张，但由于我只使用v-html 来作为文本，我可以得出结论它仍然是安全的，对吧？只要我不在input标签中使用它？