Vue -如何在vue组件中呈现HTML
提问于 2019-07-04 06:40:26
这就是我想要完成的：
{{ span('Hello') }}而期望的输出应该是：
<span>
Hello
</span>这可能吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-04 07:29:35
看看下面的代码片段-
注意-您不能在{{ }}中呈现html，因为它会被添加到元素的文本节点中。要将其呈现为html，需要使用v-html并让函数返回包装文本的element
new Vue({
el: "#app",
data: {
foo: 'asdasd'
},
methods: {
span(text) {
return `<span> ${text} </span>`
}
}
})span {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>
Render whatever you want
</h1>
<div v-html="span('Hello world')" />
</div>
Stack Overflow用户
发布于 2019-07-04 06:44:57
<span>{{Hello}}</span>
如果需要动态超文本标记语言标记<tag :is="tag">{{Hello}}</tag>
Vue.component('tag', {
props:{
is:{type:String, required:true}
},
render(h){
return h(this.tag, this.$slots.default)
}
})
new Vue({
el:'#vue',
data(){
return {
tag:'h1'
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56881982
复制
腾讯云开发者
