持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

v-model的使用

在实际开发中表单控件是非常常见的，在Vue中想获取表单数据通过v-model指令来实现表单元素和数据的双向绑定，那么如何使用v-model呢？

给input设置v-model绑定vue实例里的数据，就已经形成了双向绑定了，可以通过改变input输入框里的值改变data里的数据，也可以改变data里的数据来改变input输入框里的值

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
</div>
<script src="./vue.js"></script>
<script>
const app=new Vue({
    el:'#app',
    data:{
    message:'今天星期日'
    }
})
</script>

实现原理

v-model是如何实现双向绑定的呢？其实v-model相当于两个指令： v-bind 和 v-on ，那要如何使用这两个指令实现双向绑定呢，在input输入框里有个value属性，指定 input 输入框的值，我们给value属性使用 v-bind 动态绑定data里的数据

<div id="app">
    <input type="text" :value="message">
    <span>{{message}}</span>
</div>
<script src="./vue.js"></script>
<script>
const app=new Vue({
    el:'#app',
    data:{
    message:'你好啊'
    }
})
</script>

可以发现input输入框里的值和data里数据绑定在一起了，但只实现了单向的数据绑定，为什么是单向数据绑定呢？

因为当我们修改input输入框里的值时，data数据并没有改变，刚刚说了v-model相当于两个指令，v-on还没用上呢，那么v-on要用来绑定谁呢？在input输入框里有个input监听事件，用于动态监听用户的输入，我们使用v-on绑定input监听事件

<input type="text" :value="message" @input="input">

methods: {
    input(event){//事件对象
        console.log(event);
    }
},

当我们改变input输入框里的值时触发input监听事件，将这次事件的对象传给这个方法，里面包含了这个事件所有的参数和信息

在这个对象我们可以通过里面的target获取input输入框输入的值，再将值赋值给data里的数据

input(event){//事件对象
  this.message=event.target.value
}

这样我们就通过v-bing和v-on是实现了数据的双向绑定了

v-model的使用和原理

v-model的使用

实现原理