動態渲染 vue 模板

Question

我有 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

我怎樣才能做到這一點？ 請幫忙。 謝謝

Answer 1

您可以擁有一個文件組件並執行此操作 - 我有一個名為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" />`

你會看到輸出

你好測試

然后，您將省略 SFC 中的<template>部分。

注意：為了讓它工作，你還必須在你的項目中包含 Vue 編譯器（因為它處理將 SFC 編譯成 Vue 用來顯示數據的渲染函數）。

此鏈接： https ://v2.vuejs.org/v2/guide/installation.html#CLI 可以提供有關包含 Vue 編譯器的更多信息。