Vue - Как визуализировать HTML в компонентах Vue

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