时间戳

首页 > 解决方案 > v-html 中的 Vue.js v-model

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

问题描述

我想将 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>'
});

在此示例中，前两个输入通常会与数据链接并彼此链接，但第三个（跨度内的那个）不会

标签： javascripthtmlvue.jsvuejs2vue-component

解决方案

根据官方文档：

span 的内容将替换为rawHtml属性的值，解释为纯 HTML - 数据绑定被忽略。请注意，您不能使用 v-html 来编写模板部分，因为 Vue 不是基于字符串的模板引擎。相反，组件更适合作为 UI 重用和组合的基本单元

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

推荐阅读