vue：转义和渲染 HTML 字符串？答案

【问题标题】：vue: escape and render HTML string?vue：转义和渲染 HTML 字符串？
【发布时间】：2020-03-14 12:26:23
【问题描述】：

我正在尝试在模板中渲染一些 HTML 字符串，但我希望它们是字符串，我不想渲染“富文本”

我开始：

<template>
  <div>{{'something <like /> this'}}</div>
</template>

但是 vue 会将上面的代码渲染成以下代码： <like /> 将被渲染为 html 标签

<div>{{'something <like></like> this'}}</div>

但我想要的是这样的：

<div>something &lt;like/&gt; this</div>

我知道我可以将文本放入data

<template>
<div>{{text}}</div>
</template>
<script>
export default {
  data() {
    return {
      text: 'something <like /> this'
    }
  }
}
</script>

但这会变得乏味，我怎么能直接在模板中做呢

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我认为你需要先像这样预处理你的字符串

text.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

然后就可以在模板中使用了

【讨论】：

【解决方案2】：

您需要替换字符 < 和 > 正如您所指出的，但您还需要使用 v-html 指令，因为字符串文字中的标签会破坏小胡子绑定。

在您的脚本中：

methods: {
  htmlToText(html) {
    return html.replace(/</g, '&lt;').replace(/>/g, '&gt;')
  },
}

在您的模板中：

<div v-html="htmlToText('something <like/> this')"></div>

执行<div>{{ htmlToText('something <like/> this') }}</div> 将不起作用。

【讨论】：