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

如何在胡子绑定中解释HTML ?此时，break (<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>

你可以在这里读到

如果你使用

{{<br />}}

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

{{{<br />}}}

EDIT(2017年2月5日):正如@hitautodestruct指出的那样，在vue 2中，你应该使用v-html而不是三花括号。

2015-06-16 22:42:53

您可以使用v-html指令来显示它。是这样的:

<td v-html="desc"></td>

2015-06-24 02:20:01

从ve2开始，三大括号已弃用，您将使用v-html。

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

此外，v-html只能使用<div>或<span>，但不能使用<template>。

如果你想在应用程序中看到这个，点击这里。

2017-03-26 03:50:58

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

对于你的具体例子，你需要:

<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>

2018-08-25 20:34:17

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

<div v-html="html content data property"></div>

2019-06-25 05:20:24

在使用v-html之前，你必须确保你转义的元素在允许用户输入的情况下是干净的，否则你的应用程序就会暴露在xss漏洞中。

更多信息请访问:https://v2.vuejs.org/v2/guide/security.html

我强烈建议你不要使用v-html，而是使用这个npm包

2021-01-13 10:44:01

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

推荐文章

最新文章

标签