<div id="app">
  我的名字是:<span v-model="myName"></span>
  <br>
  <input type="text" v-model="myName">
</div>
console.clear();
var model = {
  el: '#app',
  data: {
    myName: 'Ray',
  },
};

var data = model.data;
var _data = {};
var app = document.querySelector(model.el);
var VModel = app.querySelectorAll('[v-model]');

VModel.forEach((element) => {
  element.addEventListener('input', function() {
    data[this.getAttribute('v-model')] = this.value;
  })
});

Object.keys(data).forEach((key) => {
  _data[`_${key}`] = data[key];
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get() {
      return _data[`_${key}`];
    },
    set(val) {
      var elementKeys = app.querySelectorAll(`[v-model=${key}]`);
      elementKeys.forEach((item) => {
        item.value = val; // 針對 input 發生變化時也寫入
        item.innerText = val; // 渲染到畫面上
      })
      _data[`_${key}`] = val
    }
  });
});

setTimeout(() => {
  console.log(data);
  console.log(_data);
}, 5000)

External CSS

  1. https://unpkg.com/vue@next

External JavaScript

This Pen doesn't use any external JavaScript resources.