javascript - v-html 中的 Vue.js v-model

Question

我想将 html 存储在变量中。示例:

data: function() {
  return {
    my_html: '<input type="text" v-model="data"'
  }
}

我想在数据中接收用户在字段中输入的值。但是这个连接不起作用 完整示例:

var test = new Vue({
  el: '#some_id',
  data: function() {
    return {
      data: '',
      my_html: '<input type="text" v-model="data" />'
    }
  },
  template: 
    '<div>
      <input type="text" v-model="data" />
      <input type="text" v-model="data" />
      <span v-html="my_html"></span>
    </div>'
});

在此示例中，前两个输入通常会与数据链接并相互链接，但第三个(span 内的那个)不会

Answer 1

根据 the official doc :

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition

有关更多详细信息，请尝试查看@RoyJ 的 answer