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>

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

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

2 个答案: