Vue的双向绑定 v-model的原理

使用V-model进行绑定

v-model的效果就是用户在输入的时候实际上实在修改txtVal的值,修改成用户输入的内容

<input type="text" v-model="txtVal">
<p>{{txtval}}</p>

使用ES6进行绑定

<input type="text" @input="inputChange"  :value="txtval">
<p>{{txtval}}</p>

• @input 输入事件,每次输入了新的元素,即为进行触发

• :value 活化其value值

在模型层的方法

methods:{
        inputChange(e){
            this.txtval=e.target.value}
        }

结论

v-model本质上只是语法糖,是由

 :value="txtVal" @input="txtVal=$event.target.value"

组成了v-model

即为方法也可以写成行内事件

<input type="text" :value="txtVal" @input="txtVal=$event.target.value" placeholder="初始值">