Question

我正在尝试使用道具渲染组件。但仅在内容道具不是组件时才有效。

以下是一个示例：https://jsfiddle.net/eugenio4/onf54vt5/

// register modal component
Vue.component('component', {
  template: '<span class="component-tag">This is component</span>',
})

// start app
new Vue({
  el: '#app',
  data: function (){
    return {
        test1 : '<label>this is label</label>',
        test2 : '<component></component>' //this doest work
    }
  }
})

<!-- app -->
<div id="app">  
  <span v-html="test1"></span>
  <span v-html="test2"></span>
</div>

这可能吗？

Answer 1

不，您不能使用v-html执行此操作，因为documentation明确指出：

请注意，内容是以纯HTML格式插入的 - 它们不会被编译为Vue模板。

将内容作为纯HTML插入 - 忽略数据绑定/ vue组件。请注意，您不能使用v-html来组成模板部分，因为Vue不是基于字符串的模板引擎。相反，组件是首选的UI重用和组合的基本单元。

v-html不在Vue 2中渲染vue组件

1 个答案: