在 Vue.js 中显示未转义的 HTML

IT技术 javascript html vue.js
2021-02-28 06:00:50

我怎样才能设法在胡子绑定中解释 HTML？目前，中断 ( <br />) 只是显示/转义。

小型 Vue 应用程序：

var logapp = new Vue({
  el: '#logapp',
  data: {
    title: 'Logs',
    logs: [
      { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  },
      { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  }
    ]
  }
})

这是模板：

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td>{{fail}}</td>
                <td>{{type}}</td>
                <td>{{description}}</td>
                <td>{{stamp}}</td>
                <td>{{id}}</td>
            </tr>
        </tbody>
    </table>
</div>
6个回答

您可以使用指令 v-html 来显示它。像这样：

<td v-html="desc"></td>
我在使用 v-html 来限制文本时遇到问题，？可以限制 v-html 中的文本吗？我试过了，失败了
2021-04-16 06:00:50
那个实际上在 vue2 中有效。第一个 trows 编译。
2021-05-04 06:00:50
尝试切片变量
2021-05-11 06:00:50
仅对 v-html 发表一条评论。即使这样做了，我们也需要记住，我们应该渲染经过消毒的 v-html 元素，否则我们的前端应用程序就会暴露在 xss 漏洞中。官方文档在这里：vuejs.org/v2/guide/security.html
2021-05-15 06:00:50

从 Vue2 开始，三重大括号已被弃用，您将使用v-html.

<div v-html="task.html_content"> </div>

从文档链接中不清楚我们应该在里面放什么v-html，你的变量在里面v-html。

此外，v-html仅适用于<div>或<span>但不适用于<template>.

如果您想在应用程序中实时查看此内容，请单击此处。

<template>如果你来自 Angular.js 并寻找类似的东西，“但不与”是这里的重要部分<ng-include>
2021-05-10 06:00:50

你可以在这里阅读

如果你使用

{{<br />}}

它会被逃脱。如果你想要原始 html，你必须使用

{{{<br />}}}

编辑（2017 年 2 月 5 日）：正如@hitautodestruct 指出的那样，在 vue 2 中你应该使用v-html而不是三重花括号。

请注意，在 vue 2.0 中，三重胡子已被弃用，您应该使用 v-html代替。
2021-05-04 06:00:50
@ИльяЗеленько 真的必须同意你的看法。如果您尝试将文本内容作为 <slot> 提供，则尤其如此……您必须创建一个新元素
2021-05-10 06:00:50
我不喜欢在新方法中我经常不得不创建一个不必要的元素，纯粹是为了插入 html。这有时会破坏样式并创建不必要的嵌套。
2021-05-14 06:00:50

Vue 默认附带 v-html 指令来显示它，你将它绑定到元素本身而不是使用普通的 mustache 绑定字符串变量。

因此，对于您的具体示例，您需要：

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td v-html="fail"></td>
                <td v-html="type"></td>
                <td v-html="description"></td>
                <td v-html="stamp"></td>
                <td v-html="id"></td>
            </tr>
        </tbody>
    </table>
</div>

您必须使用 v-html 指令在 vue 组件中显示 html 内容

<div v-html="html content data property"></div>
其它你可能感兴趣的问题
上一篇如何在 ReactJS 中实现带有受控组件的动态表单？ 下一篇如何在 .ready() 期间更改文档的标题？