vue 中 v-model 可以实现数据的双向绑定,但是为什么这个指令就可以实现数据的双向绑定呢?
其实 v-model 是 vue 的一个语法糖。即利用 v-model 绑定数据后,既绑定了数据,又添加了一个 input 事件监听。
实现原理:
- v-bind绑定响应数据;
- 触发input事件并传递数据。
点击查看代码
<input v-model="text"></input>
// 等价于:
<input :value="text" @input="text = $event.target.value"></input>
// 组件中使用:
<custom-input :value="text" @input="$event"></custom-input>
// 根据v-model原理模拟:
<input type="text" id="ipt1">
<input type="text" id="ipt2">
<script>var ipt1=document.getElementById('ipt1');var ipt2=document.getElementById('ipt2');ipt1.addEventListener("input",function(){ipt2.value=ipt1.value;})
</script>