我正在尝试在v-html中使用组件。我想从自己的API获取html,然后将进行演示。
这是我的代码。
HTML:
<!-- app -->
<div id="app">
<span v-html="html"></span>
<badge></badge>
<span v-html="html2"></span>
<partial name="my-partial"></partial>
<span v-html="html3"></span>
</div>
Javascript:
Vue.component('badge', {
template: '<span class="component-tag">This is component</span>',
})
Vue.partial('my-partial', '<p>This is a partial!</p>')
// start app
new Vue({
el: '#app',
data: {
html: '<p>THIS IS HTML</p>',
html2: '<badge></badge>',
html3: '<partial name="my-partial"></partial>'
}
})
https://jsfiddle.net/9w3kz6xm/4/
我尝试了partials,因为Vue文档说:“如果您需要重用模板,则应该使用partials。”
这没用。也许我在犯错误,我不知道什么是错误。
谢谢你。
可以肯定的是,Vuejs使得直接使用外部html变得非常困难。v-html
只会替换html内容,因此不会执行任何指令。它的目的是避免XSS攻击,如此处所述:https : //vuejs.org/v2/guide/syntax.html#Raw-HTML
在网站上动态呈现任意HTML可能非常危险,因为它很容易导致XSS漏洞。仅对受信任的内容使用HTML插值,而不对用户提供的内容使用HTML插值。
如果您确实需要使用外部html,则可以使用Vue.compile()
此处记录的文档:https : //vuejs.org/v2/api/#Vue-compile
一个有效的示例可以在这里找到:https : //jsfiddle.net/Linusborg/1zdzu7k1/及其相关的讨论可以在这里找到:https : //forum.vuejs.org/t/vue-compile-what-is-staticrenderfns -render-vs-staticrenderfns / 3950/7
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句