And*_*der 5 html javascript vue.js
我目前正在开发一个如下所示的组件：
<pre v-highlightjs>
<code>
<slot></slot>
</code>
</pre>
所以我遇到的问题是，当我在槽内编写 html 时，该 html 会被渲染，并且在我的情况下不会显示为字符串或代码示例。我已经用转义的 < 和 > 对其进行了测试，并且它有效。如何访问槽内的 html 并自动转义它？
谢谢
编辑：
我使用该组件的highlight.js 来突出显示组件内的代码。highlight.js 也可以突出显示 html。当我把例如
<html><head></head><body></body></html>
在我的槽内，显示了该框，但输入呈现为 html。所以我想转义 html 标签（和其他代码片段），以便显示它并突出显示。希望能更具体地说明我的问题。
需要注意的一个重要限制是，您的 HTML 不是 HTML，它是 Vue 模板引擎的输入，因此组件在槽中看到的内容可能并不完全是 HTML 文件中的内容。
编写指令来获取 HTML 内容并将其替换为该内容的文本版本非常简单。将其放入组件中也非常简单。您可以在下面的代码片段中看到这些。
您还将看到，Vue 模板引擎删除了不应位于 内的标签body：html、head和body标签不会出现在组件中。它们的内容（如果有）将保留。
如果能够使用这些标签（或者，就此而言，可能是无效的 HTML）很重要，那么您将无法在插槽中执行此操作。您需要将 HTML 作为数据字符串，您可以使用普通的花括号轻松地对其进行插值。
new Vue({
el: '#app',
data: {
headContent: 'Something in the head'
},
components: {
htmlEscaper: {
template: '#html-escaper',
directives: {
escapeContent: {
bind(el) {
const html = el.innerHTML;
el.textContent = html;
}
}
}
}
}
});<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<html-escaper>
<html>
<head>
{{ headContent }}
</head>
<some-junk>
Custom tags are ok
</some-junk>
<body>
<div>This part is legit</div>
</body>
</html>
</html-escaper>
</div>
<template id="html-escaper">
<code v-escape-content>
<slot>
</slot>
</code>
</template>| 归档时间： |
|
| 查看次数： |
2630 次 |
| 最近记录： |