Vue - 如何在 Vue 组件中呈现 HTML答案

【问题标题】：Vue - How to render HTML in vue componentsVue - 如何在 Vue 组件中呈现 HTML
【发布时间】：2019-11-14 20:15:16
【问题描述】：

这就是我想要完成的：

{{ span('Hello') }}

期望的输出应该是：

<span>
   Hello
</span>

这可能吗？

谢谢

【问题讨论】：

显然可以，但您能分享一下您尝试过的方法吗？
你应该使用 JSX 来显示这个目的！关注这里scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care
@SatyamPathak 好吧，我真正想要完成的是，当打开某个配置时，该方法需要在其周围添加一个“跨度”或“按钮”，以便我可以点击它。
这看起来像是你从根本上避免做的事情！人们需要了解您的方法，而总体结果会掩盖正在发生的事情。

标签： vue.js render directive

【解决方案1】：

看下面的sn-p-

注意 - 您不能在 {{ }} 内渲染 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>

【讨论】：

谢谢。我不知道您不能在括号中呈现 HTML。使用您的解决方案继续
感谢您的帮助。它按预期工作:)

【解决方案2】：

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

【讨论】：