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

Question

这就是我想要完成的：

{{ span('Hello') }}

所需的输出应该是：

<span>
   Hello
</span>

这可能吗？

谢谢

Answer 1

<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'
    }
  }
})

Answer 2

看看下面的片段 -

注意 - 您无法在 {{ }} 内呈现 html，因为它已添加到元素的文本节点。要将其呈现为 html，您需要使用 v-html 并使用 return 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>

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

Vue - How to render HTML in vue components

vue.js

render

directive