v-model双向绑定介绍

一、v-model实现双向绑定的原理

v-model指令用于实现表单和数据的双向绑定，下图表示绑定过程：

二、v-model指令的实质

v-mode本身其实是一个语法糖，他的实质是v-bind和v-on指令：

 v-on: 当我们输入内容时 ，因为input 中v-model绑定了message，所以能实时的把数据监听并传递到后台。

 v-bind: 当我们message发生改变时 ，应为胡子语法，实时的把数据绑定上来。

三、v-model双向绑定

1、单选框 radio v-model 双向绑定

2、v-model  checkbox复选框

单选框时对应布尔类型，绑定checked

3、v-model 列表框 select

多选时：

v-model绑定的是一个数组

按住Ctrl可以多个选择

单选时：

v-model绑定的是一个值

4、v-model绑定值

动态赋值，实质就是v-bind

v-bind语法糖  ：

四、v-model 修饰语法

v-model修饰语法一共有三个：.lazy、.number、.trim

.lazy:可以让数据延迟更新。

.number:让数据内容转换成数字类型。

.trim：删除多余空白，优化视图。