技術標籤：ES6jsdomproxyjavascript

  <input type="text" v-model="title" />
  <input type="text" v-model="title" />
  <div v-bind="title">1</div>

<script>
	function Agency() {
		const proxy = new Proxy({},{
			get(obj,key) {
				return
 
 obj[key]
			},
			set(obj,key,value){
				obj[key] = value
				// 為標籤中含有v-model並且值為當前key 的節點賦值
				document.querySelectorAll(`[v-model=${key}]`).forEach(item=>{
					item.value = value
				})
				// 為標籤中含有v-bind並且值為當前key 的節點賦值
				document.querySelectorAll(`[v-bind=${key}]`).forEach(item=>{
					item.interHTML =
 
 value
				})
			}
		})
		this.init = function() {
			// 獲取屬性含有v-model的dom節點
			const els = document.querySelectorAll("[v-model]")
			els.forEach(item=>{
				item.addEventListener("keyup",function(){
					// 獲取v-model的屬性值，為其值進行 代理
					// console.log(this,'this')
					// console.log(this.getAttribute(
 
"v-model"),'v-model')
					proxy[this.getAttribute("v-model")] = this.value
				})
			})
		}
	}
	new Agency().init()
</script>