Question

作为标题状态，我想尝试在数据绑定中添加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>

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

Answer 1

替换

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

由此：

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

在documentation中，他们说：

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

但是请注意：

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

如果您需要呈现用户提供的内容，请先使用any html sanitizer，然后再将内容传递给v-html

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

1 个答案: