我有一个属性,其中包含一个HTML字符串作为其属性之一.

当我try 将其打印到模板中的页面时,它实际上会打印HTML.因此,文本包含HTML标记,浏览器不会将其本身解释为HTML.

我该怎么解决这个问题?

模板:

<div class="description">
    {{ property.description }}
</div>

输出:

<p>Suscipit est aut molestiae provident quis magnam.</p> <p>Nesciunt iure impedit sint iste.</p> <p>Aspernatur repudiandae laborum dolor harum magnam officiis ad nihil.</p> <p>Non deserunt rerum adipisci voluptates est eos et.</p> 

推荐答案

NOTE: This answer was intended for vue.js v1. For v2, please see webnoob's answer 100.

根据docs人的说法:

双胡子将数据解释为纯文本,而不是HTML.为了输出真正的HTML,您需要使用三个胡须.

使用3个花括号完成任务:

<div class="description">
    {{{ property.description }}}
</div>

旁注(也来自文档):

在您的网站上动态呈现任意HTML可能是very dangerous,因为这很容易导致XSS攻击.仅在受信任的内容上使用HTML插值,而不在用户提供的内容上使用.

Vue.js相关问答推荐

Vuetify 2中自定义标头的排序和筛选

写入计算值时出错,但我没有写入任何值

通过元素加中的正则表达式输入电话号码格式

如何使用 async/await 在 vue js 中添加标头

带有 netlify.toml 文件的环境变量

Vue:将点击事件绑定到动态插入的内容

如何对对象数组进行 v-model

动态插入字符串上的 Vue 事件处理程序不起作用

使用 vee-validate 在 vue js 中进行验证有错误

CLI 3 - 如何为 CSS/Sass 创建vendor bundle ?

Vue.js 中 Chrome 和 Datalist 的性能问题

Javascript/vue.js 接收json

将 Vuetify 从 1.5 升级到 2 时,Sass-loader 错误 'options has an unknown property 'indentedSyntax''

此 set-cookie 已被阻止,因为它具有 samesite=lax

Vue 如何使用 slot 和 slot-props 测试组件

正确的 vueJS 方法将props与数据同步

如何在两个属性上使用 Vue/Vuetify 自动完成过滤器?

vue-router如何持久化导航栏?

在 VueJS 中观察元素的高度

无法访问手表处理程序 vuejs 中的数据变量