将HTML绑定到属性（Vue.js）

Posted 2021-03-30

如何将html绑定到Vue组件属性？

在我的php脚本中，我有：

$html = '<div>some text</div>';

$box = "<box_includes
html_text='$html'
></box_includes>";

在我的vue模板中：

<template id="template_box_includes">
{{ html_text }}
</template>

但在我的浏览器中，我看到所有文本，包括标签，它被识别为文本：

<div>some text</div>

答案

编辑2019：

下面回答@devman在评论中所说的is outdated。请改用v-html：

<template v-html="html_text"></template>

---

较旧的答案

在Vue JS中，双括号的使用是逃避HTML。您需要使用三个以避免转义html，如下所示：

<template id="template_box_includes">
{{{ html_text }}}
</template>

您可以在本页的文档中了解更多信息：http://vuejs.org/guide/syntax.html#Raw-HTML

我希望这有帮助！