转自博客园v-model的修饰符和使用 作者:胡卓
v-model的修饰符 v-model.lazy 只有在input输入框发生一个blur时才触发 v-model.trim将用户输入的前后的空格去掉 v-model.number 将用户输入的字符串转换成number
在input textarea select中使用
以下代码都没有写出js部分，请在data中自行添加对应属性。
当使用v-model将input输入框与name绑定那么输入框改变的同时name的值也会同步的发生改变
<input type="text" v-model="name"><br /> <span> {{ name }} </span>但是，这样会对使用有影响，所以我们可以用v-model的修饰符lazy
v-model.lazy 只有在input输入框发生一个blur时才触发
<input type="text" v-model.lazy="name"><br /> <span> {{ name }} </span>v-model.trim 将用户输入的前后的空格去掉,我们在输入框中输入很多空格后再输入内容，下面的span还是原来那样的，不会多出空格，原因是HTML只显示一个空格，但是name的值就不一样了，它会将这些空格算上，我们可以在span上加一个pre标签，这时这些空格就会显示出来
<input type="text" v-model="name"><br /> <pre><span> {{ name }} </span></pre>v-model.trim就是用来清除这些多余的空格的，当然如果是密码等输入框，请不要加此修饰，有些用户会用空格做密码。
<input type="text" v-model.trim="name"><br /> <span> {{ name }} </span>这时你无论给它前后加多少空格都会被清除掉。
v-model.number 将用户输入的字符串转换成number
<input type="text" v-model="age"><br /> <span> {{typeof age }} </span>这种情况下，你输入的数字会被自动转换成字符串，如果加上.number
<input type="text" v-model.number="age"><br /> <span> {{typeof age }} </span>这样就会把你输入的数字转换成number，如果你在输入框中输入非number，那么在blur时，从第一个非number处后main就会全部被清除掉。
v-model在input textarea select中使用，前面我们都是在input的type = text中使用的，在textarea中和它是一样的，唯一区别是这个是多行的。
在type为radio中使用
你的性别是？ 男：<input v-model="sex" type="radio" value="male"> 女：<input v-model="sex" type="radio" value="famale"> <br /> <span> {{ sex }} </span>这时选中哪个，sex的值就是其value
在type为checkbox中使用
你的性取向是： 男：<input v-model="sexual_orientation" type="checkbox" value="male"> 女：<input v-model="sexual_orientation" type="checkbox" value="famale"> <br /> <span> {{ sexual_orientation }} </span>在多选时，要把data区中的v-model绑定的属性（sexual_orientation）设置成一个数组。
在select中使用
你的家乡在哪？ <select v-model="from" name="" id=""> <option name="湖北" value="1">湖北</option> <option name="湖南" value="2">湖南</option> </select> <span>{{ from }}</span>select中也可以多选
你想去哪？
<select v-model="from" name="" id="" multiple> <option name="湖北" value="1">湖北</option> <option name="湖南" value="2">湖南</option> <option name="湖南" value="3">河北</option> <option name="湖南" value="4">河南</option> </select> <span>{{ from }}</span>和checkbox 一样请将data中的v-model绑定的那个属性（from）设置成一个数组
