v-model原理解析

vue中v-model可以实现数据的双向绑定，但是为什么这个指令就可以实现数据的双向绑定呢？

其实v-model是vue的一个语法糖。即利用v-model绑定数据后，既绑定了数据，又添加了一个input事件监听。

实现原理：

1、v-bind绑定响应数据

2、触发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>

巴特西

v-model原理解析

最新文章

热门文章