HTML

  1.          <label for="box1">盒子1</label>
  2.     <input type="text" v-model = "title" id="box1">
  3.     <label for="box2">盒子2</label>
  4.     <input type="text" v-model = "title" id="box2">
  5.     <h4 v-bind="title"></h3>
  6.         <hr>
  7.     <label for="box1">盒子1</label>
  8.     <input type="text" v-model = "content" id="box1">
  9.     <label for="box2">盒子2</label>
  10.     <input type="text" v-model = "content" id="box2">
  11.     <h4 v-bind="content"></h3>

JS

  1. let bindBox = document.querySelectorAll('[v-model]')
  2. let proxy = new Proxy({},{
  3.     get(){},
  4.     set(obj,key,value){
  5.        obj[key] = value
  6.        document.querySelectorAll(`[v-model=${key}]`).forEach(i=>{
  7.            i.value = value
  8.              })
  9.        document.querySelectorAll(`[v-bind=${key}]`).forEach(i=>{
  10.             i.innerHTML = value
  11.           })
  12.     }
  13. })
  15. bindBox.forEach(item => {
  16.     item.addEventListener("compositionend",()=>{
  17.         proxy[item.getAttribute('v-model')] = item.value
  18.   })
  19. })