使用

<input v-model="message">

表单元素的value绑定一个变量值，但是由于表单元素的value是可以通过用户去进行更改的，那么这个绑定变量的操作是不是只有一个初始化的作用呢？如果仅仅使用v-bind:value='message'显然是只能初始化，但是如果使用v-model指令，它可以实现数据的双向绑定，即用户对value 的修改直接就导致了data里面数据的改变。

v-model的原理

v-model其实就是个语法糖。他的本质是进行了这两步操作：

将数据绑定到元素上去，这个很简单，只要通过v-bind:value='message'就可以实现了。
当用户改变表单元素的value时，我们要将用户改变后的value重新赋值给data中的数据，其实这个也好实现。我们就是要监听表单元素的改变。怎么监听表单元素的改变呢？通过监听input事件。当你进行输入的时候，同时会触发input事件。那只需要在触发这个事件的时候，将value赋值给data中的相应变量就行了。**那我们怎么获取到value值呢？**这个很简单，之前我们不是说过用户和界面交互的时候会产生一个event对象嘛，通过event.target就能获取到鼠标焦点处对应的DOM元素，那么我们可以这样获取value：$event.target.value

那么我们可以通过下面这段代码，完全实现v-model的功能
<input :value="message" @input="message=$event.target.value">
这就是v-model的原理。

v-model和radio类型的结合

复习radio

radio类型，就是单选框类型

<input type = "radio" value="man">男
<input type = "radio" value="woman">女

通过什么来判断他是不是同一个单选框呢？
通过name属性

 <input type = "radio" name="sex"value="man">男
    <input type = "radio" name="sex" value="woman">女

raido和v-model结合使用

那么显然v-model应该和整个radio单选框进行绑定,所以每个选项都要绑定v-model.换言之，用v-model绑定了同一个变量的单选框，一定是一组单选框，所以就不需要name属性进行区别了。

 <input type = "radio" v-model="sex"value="man">男
    <input type = "radio" v-model="sex" value="woman">女

设置默认值

很简单，就是sex这个数据的值和某个单选框的value一致，就是设置默认值。

数据的双向绑定

当你选择某个单选框选项的时候，说明这个raido单选框的value已经确定，所以它会把这个单选框选项的value返回给v-model.

radio和checkbox结合使用

checkbox作单选框的时候

通常出现在是否同意协议的情景，不同意无法下一步。

<input type="checkbox" v-model="agree">是否同意上述协议

它其实就是一个bool值，true就选中，false就不选。所以v-model在单选的时候，绑定的是一个bool值!

checkbox作复选框的时候

		<input type="checkbox" v-model="color" value="red">红色
        <input type="checkbox" v-model="color" value="green">绿色
        <input type="checkbox" v-model="color" value="pink">粉色
        <input type="checkbox" v-model="color" value="yellow">黄色

很显然v-model应该和整个复选框进行绑定，所以每个复选框选项都应该绑定v-model.这个时候v-model的值显然是个数组了，他是你选中的所有复选框项value值组成的数组。。

设置初始值

比如我想让绿色默认选中，就可以使color=["green"]即可。

v-model和select结合使用

复习select

 <select name="color" id="">
            <option value="red">红色</option>
            <option value="pink">粉色</option>
            <option value="green">绿色</option>
        </select>

如果绑定v-model肯定是和整个select进行绑定，所以只需要给select添加v-model属性即可。

select单选的时候

select单选的时候，v-model是一个值，当他和option选项的value一致。那么这个option就被选中了。

select多选的时候

多选的时候，select要添加multiple属性，这样才能多选。那么这个时候，v-model对应的是一个数组，是被选中的option的value组成的数组。

v-model的修饰符

.lazy。v-model默认情况下就是输入框的内容发生改变，就会进行数据更新，实际上这样过于频繁了。那么我们需要怎么做比较好呢？加上lazy修饰符，那么它只会在失去焦点或者输入回车的时候进行数据更新

<input type="text" v-model.lazy="message">

.number。默认情况下input框中不管输入什么内容都会当作string，然后赋值给v-model绑定的数据，如果我们希望它返回的是Number类型，而不是String类型.可以通过number修饰符，那么返回的时候，会自动转成Number类型赋值给数据。

<input type="text" v-model.number="message">

trim。如果你输入的内容前后有空格，这样赋值给我们的数据，往往我们的数据还要进行一次处理，去除前后的空格，如果我们使用trim修饰符，他会把我们的内容前后空格都去除掉再赋值给变量。

<input type="text" v-model.trim="message">

Vuejs--v-model双向绑定

使用