时间戳

首页 > 解决方案 > vue：转义和渲染 HTML 字符串？

vue.js - vue：转义和渲染 HTML 字符串？

问题描述

我正在尝试在模板中呈现一些 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.jsvuejs2

解决方案

您需要替换字符<并且>正如您所指出的那样，但您还需要使用该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>行不通的。

推荐阅读