Vue - 如何在Vue组件中渲染HTML

Question

这是我想要实现的目标：

{{ span('Hello') }}

期望的输出应该是什么：

<span>
   Hello
</span>

这可行吗？

谢谢

- Kevin Gorjan

---

显然是有可能的，但是您可以分享一下您已经尝试过什么吗？ - Satyam Pathak

你应该使用JSX来显示这个目的！请参考这里 https://scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care - Le Khiem

@SatyamPathak 嗯，我真正想要实现的是，当某个配置被打开时，该方法需要在其周围添加一个“span”或“button”，以便我可以单击它。 - Kevin Gorjan

那看起来像是你基本上要避免做的事情！人们需要理解你的方法，而整体结果却掩盖了正在发生的事情。 - bbsimonbb

Answer 1

看下面的代码片段 -

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

- Satyam Pathak

---

谢谢。我不知道你不能在括号中呈现HTML。使用了你的解决方案继续。 - Kevin Gorjan

Answer 2

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

- Rahimuddin

---

请参见“[答案]”和完全基于代码的解释。虽然这可能在技术上是正确的，但它并没有解释为什么它可以解决问题或应该被选为答案。我们应该在帮助解决问题的同时进行教育。 - the Tin Man

感谢您的建议 @theTinMan。我会记住这个建议，并且我也会编辑上面的答案 :) - Rahimuddin

Answer 3

最初的回答：

如果您需要动态 HTML 标签，请使用以下代码：

<tag :is="tag">{{Hello}}</tag> 其中，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'
    }
  }
})

- Puwka