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

Question

这就是我想要完成的：

{{ span('Hello') }}

所需的输出应该是：

<span>
   Hello
</span>

这可能吗？

谢谢

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>