Vue表单输入绑定v-model
表单输入绑定
基础用法 v-model
在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它负责监听用户的输入事件以更新数据。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
文本
<input type="text" v-model="msg" value="abcd">{{msg}}
data: { msg:'文本', },
运行效果图
修改input框的内容，data的msg值也被改变。
多行文本
注意多行文本中，需要给标签加入style="white-space: pre-line;"的样式，否则不会自动换行。
<textarea v-model="textMsg"></textarea>{{textMsg}}
data: { msg:'文本', textMsg:'多行文本' },
运行效果图：
1 加了样式，输出会自动换行
而且修改文本内容，data的textMsg值也被改变。
2 不加样式 不会换行
复选框
<input type="checkbox" id="a" v-model="duoxuan" value="A"> <label for="a">A</label> <input type="checkbox" id="b" v-model="duoxuan" value="B"> <label for="b">B</label> <input type="checkbox" id="c" v-model="duoxuan" value="C"> <label for="c">C</label> ------{{duoxuan}}
data: { duoxuan:[] },
运行效果图：
1、不操作
2、勾选A
3、在不刷新的情况下，勾选剩余的BC
当复选框没有value属性或属性的值为空时，
我把A的value值设置为""，BC删除value属性。
<input type="checkbox" id="a" v-model="duoxuan" value=""> <label for="a">A</label> <input type="checkbox" id="b" v-model="duoxuan" > <label for="b">B</label> <input type="checkbox" id="c" v-model="duoxuan" > <label for="c">C</label> ------{{duoxuan}}
data: {
duoxuan:[]
},
运行效果图：
1勾选A：
2 勾选B：
只勾选B，发现B和C同时被勾选，并且数组传入一个null，而不是两个。
只勾选C的情况也和上面一样。
3 勾选A和B：
验证：
<button @click="a">查看类型</button>
methods: { a(){ console.log(typeof vm.duoxuan[0]) } }
运行结果：
1勾选A ，类型输出为string
2 勾选B 输出object
结论：
A是string类型，B和C不设置value返回一个null对象。
当把data里的duoxuan属性由[]改为{}或者""时，
<input type="checkbox" id="a" v-model="duoxuan" value="A"> <label for="a">A</label> <input type="checkbox" id="b" v-model="duoxuan" value="B"> <label for="b">B</label> <input type="checkbox" id="c" v-model="duoxuan" value="C"> <label for="c">C</label> ------{{duoxuan}}
data: { duoxuan:{} },
运行效果图：
1 打开页面 什么也不操作
2点击A
三个√同时取消，并且值由{}变为false。
无论点击ABC中的某一项，都是会同时勾选或者取消勾选。
2 再次点击
值变为true。
单选按钮
<input type="radio" id="x" v-model="pick" value="A"> <label for="a">A</label> <input type="radio" id="y" v-model="pick" value="B"> <label for="b">B</label> <br> <span>Pick: {{ pick }}</span>
data:{ pick:'' }
运行结果：
1选B
2选A
下拉选择框
1 单选
<select name="" id="" v-model="selected"> <option value="student">学生</option> <option value="teacher">老师</option> <option value="driver">司机</option> <option value="lawer">律师</option> </select> <br> <p>{{selected}}</p>
data:{ selected:'', }
运行效果图:
1 什么也不操作，默认为空
2 选择其中一个，输出的是value的值。
把律师的value属性整个删除。
<option >律师</option>
运行效果图：
1输出的值变为了标签内的文本内容
设置value，但是不输入值。
<option value="">律师</option>
运行效果图：
1 默认选中了律师，然后输出了""空串。
可以在第一项设置一个disabled，兼容ios。
<select name="" id="" v-model="selected"> <option value="" disabled >请选择</option> <option value="student">学生</option> <option value="teacher">老师</option> <option value="driver">司机</option> <option value="">律师</option> </select> <br> <p>{{selected}}</p>
多选下拉选择框
加个multiple属性 ，并且v-model绑定到数组
注意：多选需要按住ctrl才可以。不然还是单选。
<select name="" id="" multiple v-model="moreselected"> <option value="" disabled >请选择</option> <option value="student">学生</option> <option value="teacher">老师</option> <option value="driver">司机</option> <option value="">律师</option> </select> <br> <p>{{moreselected}}</p>
data:{
moreselected:[],
}
运行效果图:
按住ctrl进行多选
但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。
值绑定
复选框
可以给复选框指定true-value和false-value的值，他们会在返回true和false的时候给到相应的值。
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
{{toggle}}
data:{ toggle:'', }
运行图：
勾选
取消勾选
![]()
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：
<input v-model.lazy="msg">
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
<input v-model.number="age" type="number">
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
浙公网安备 33010602011771号