在 html 中转义 vue 组件答案

【问题标题】：Escape vue components in html在 html 中转义 vue 组件
【发布时间】：2016-04-10 17:07:52
【问题描述】：

我正在努力用component / HTML example 配对。

这是我所做的示例（它不起作用）：

<td>
    <vm-three-state-checkbox-filter 
        name="three-checkbox"
    ></vm-three-state-checkbox-filter>
</td>
<td v-pre>
    <pre>
        <vm-three-state-checkbox-filter 
            name="three-checkbox"
        ></vm-three-state-checkbox-filter>
    </pre>
</td>

结果如下：在左边你可以看到渲染的组件，在右边我期望看到原始 html 而不是我所呈现的虚无。

我可以在data 中将转义的 HTML 指定为字符串，这样会起作用（默认情况下 vue 会转义字符串），但我更喜欢在模板中进行。

提前感谢您的帮助。

【问题讨论】：

标签： vue.js

【解决方案1】：

v-pre 指令阻止 Vue 编译该元素内的任何内容。

因此，您的 <vm-three-state-checkbox-filter> 元素保留在浏览器中，就像它在模板中一样，并且由于它不是有效的 HTML 元素，浏览器将显示：什么都没有。

v-pre 不会为您转义任何内容。它只会阻止 Vue 编译 Vue-template-code 的东西——组件、指令、mustache {{}} 标签。

您可能可以编写一个小的自定义指令（启用 terminal: true option），将其中的 HTML 元素转换为转义字符串，但这不是我可以当场拼凑的东西。

【讨论】：

【解决方案2】：

HTML 代码没有用标签转义。

【讨论】：