Vue 动态 html - 不会解析 Vue 数据对象答案

【问题标题】：Vue dynamic html - won't to parse vue data objectVue 动态 html - 不会解析 Vue 数据对象
【发布时间】：2018-06-19 10:44:05
【问题描述】：

我有用 Vue 编写的示例代码：

  template: `
    <table>
     <tbody>
      <tr v-html="tableHTMLContent"></tr>
     </tbody>
    </table>`,
   data() {
     this.tableHTMLContent: '',
     this.myTextName: 'aaaa'
   },
  methods: {
   addSampleCode() {
     this.tableHTMLContent = '<p> {{ myTextName }} </p>'
   }
  }

问题在于解析{{ myTextName }} 标签。 Html 被正确注入，但 Vue 不会解析 myTextName 变量。 Vue 不显示 aaaa 值。我必须做些什么来解析像 {{ }} 这样的 Vue 标签和像 v-for、v-if 等其他标签。

【问题讨论】：

请参考：-coursetro.com/posts/code/135/…

标签： vuejs2 vue-component

【解决方案1】：

要在方法中将数据值与模板代码一起呈现，您可以使用 Vue.compile( ... )

查看此链接：

https://vuejs.org/v2/api/#Vue-compile

用法示例：

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

【讨论】：