Question

我有用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等其他标签。

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

Vue动态html - 不解析vue数据对象

1 个答案: