动态渲染vue模板

我有 vue 模板数据作为字符串。例如，
String s = "<div>{{myData}}</div>"

现在我想在我已经定义的 vue 组件中进行渲染。

<template>
<div>
   HERE I NEED TO PLACE THE STRING
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data: {
    myData: "IRONMAN"
  },
}
</script>

现在我想要输出为IRONMAN

我怎样才能做到这一点？请帮忙。 谢谢

您可以拥有一个文件组件并执行此操作 - 我有一个名为Dynamic.vue它接受 HTML 字符串 - 我用它来允许用户生成自己的模板，并且绑定都正确匹配，例如：

<script>
export default {
  data () {
    return {
      someVar: 'Test'
    }
  },
  props: {
    templateHtml: {
      templateHtml: true,
      type: String
    }
  },
  created () {
    this.$options.template = this.templateHtml
  }
}
</script>

如果你这样称呼它：

this.htmlData = '<div>Hello - {{{someVar}}</div>'
....
<my-dynamic-component :template-html="htmlData" />`

你会看到输出

你好测试

然后你会省略<template>参与证监会。

注意：为了使其工作，您还必须在项目中包含 Vue 编译器（因为它负责将 SFC 编译为 Vue 用于显示数据的渲染函数）。

这个链接：https://v2.vuejs.org/v2/guide/installation.html#CLI https://v2.vuejs.org/v2/guide/installation.html#CLI可以提供有关包含 Vue 编译器的更多信息。