Vue -如何在vue组件中呈现HTML

11dmarpk  于 2022-11-30  发布在  Vue.js
关注(0)|答案(3)|浏览(1026)

这就是我想要达到的目的:

{{ span('Hello') }}

期望的输出应该是:

<span>
   Hello
</span>

这可能吗?
谢谢

hgqdbh6s

hgqdbh6s1#

请看下面的片段-
注意-你不能在{{ }}中呈现html,因为它被添加到元素的文本节点。要将它呈现为html,你需要使用v-html,并让你的函数返回element Package 你的文本
第一个

2vuwiymt

2vuwiymt2#

<span>{{Hello}}</span>
如果需要动态HTML标记<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'
    }
  }
})
kd3sttzy

kd3sttzy3#

对于Vue3,它是v-html="htmlContent"

相关问题