A､ 作用
表单类元素上双向绑定事件
B､基本用法
1、input + textarea
所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value
<!--我是多行文本的初始化值 不会显示了，显示内容是 msg 的内容 -->
<textarea name="" id="" cols="30" rows="2" v-model="msg">我是多行文本的初始化值</textarea>
{{ msg }}
2、单选按钮
2.1､ 单个单选框
只能用v-bind，而v-model 不管用
<input type="radio" v-bind:checked = "oneradio">
2.2､ 多个单选框
如果是多个单选框，一定要v-model来绑定，绑定选中的单选框的value值，此处所绑定的初始值可以随意给
//html 给name值表示多个单选项，只能选择一个
单选1<input type="radio" name="checks" value="单选1" v-model="checkname"><br>
单选2<input type="radio" name="checks" value="单选2" v-model="checkname"><br>
单选3<input type="radio" name="checks" value="单选3" v-model="checkname"><br>
<br>
现在选中的是 {{ checkname }}
//js
...
data:{
value: '',
msg: '',
oneradio: false,
checkname: '单选1' // 此处所绑定的初始值可以随意给
}
3、复选框
3.1､单个复选框
直接用定一个布尔值，可以用v-mode 或 v-bind
单个复选框(v-bind表示)：<input type="checkbox" v-bind:checked="oneradio"> <br>
单个复选框(v-model表示)：<input type="checkbox" v-model="oneradio">
3.2､多个复选框
需要v-model来配合value使用 + v-model绑定一个数组
注：如果绑定的是字符串，则会转化为true或false，与所有绑定的复选框的checked属性相对应
//html
多个复选框 <br>
选项1<input type="checkbox" value="选项1" v-model="checks">
选项2<input type="checkbox" value="选项2" v-model="checks">
选项3<input type="checkbox" value="选项3" v-model="checks">
<br>
现在选中的是 {{ checks }}
//js
...
data:{
value: '',
msg: '',
oneradio: true,
checkname: '单选1',
checks: '' // 绑定的是字符串，则会转化为true或false
checks: [] // 绑定的是数组，含有选中的复选框的value值的一个数组
}
4､ 下拉框
4.1､ 如果是单选，所绑定的value值初始化可以为 数组 或 字符串，结果是转化为所选定项的value值
注： 有value直接优先匹配一个value值，没有value就匹配一个text值
4.2､ 如果是多选，需要v-model来配合value使用，v-model绑定一个数组，与复选框类似
4.3､ v-model一定是绑定在select标签上
//html
<select v-model="selected">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>
<br>
现在选中的是 {{ selected }}
//js
...
data:{
value: '',
msg: '',
oneradio: true,
checkname: '单选1',
checks: [],
selected:''，// value 值为字符串可以
selected:[] // value 值为数组也可以
}
小总结：
1､如果是单选，初始化最好给定字符串，因为v-model此时绑定的是静态字符串或者布尔值
2､如果是多选，初始化最好给定一个数组
C、绑定值
1､ 单选按钮
v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值
//v-model对单个单选框不生效，但是给单选按钮动态绑定一个value值，就能通过v-model获取它的value值
<input type="radio" v-model="picked" v-bind:value="value">{{picked}}
2､复选框
通过true-value、false-value 去绑定value值，v-model绑定的就是他的value值
//html
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
{{toggle}} <br>
选中：{{ toggle == value1}} <br>
没选中： {{ toggle == value2}}
//js
...
data:{
toggle: true,
value1: '选中啦',
value2: '没有选中啦'
} // 选中和没选中时的value值不一样
3､下拉框
在select标签上，v-model绑定的是option上的value值，绑定value值对option并没有影响
//html
<select v-model="valueSele" :value="{num:123}">
<option value="list1">list1</option>
<option value="list2">list2</option>
<option value="list3">list3</option>
</select>
{{typeof valueSele}}----{{ valueSele }}
// 若把 :value="{num:123}"动态绑定到option上
<select v-model="valueSele">
<option value="list1" :value="{num:123}">list1</option>
</select>
//js
...
data:{
valueSele:''
}
D、修饰符
1､lazy
v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新
<input type="text" v-model.lazy="msg">{{msg}} // 敲回车或在失去焦点后渲染
2､number
将输入 的字符串转化为number类型
<input type="text" v-model.number="value">{{typeof value}}
3､trim
自动过滤输入过程中首尾输入的空格
<input type="text" v-model.trim='value'>{{value.split('').length}}
网友评论