vue.js - 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>