1.v-model的基本使用
表单提交是开发中非常常见的交互功能
比如用户在登录、注册时需要提交账号密码
比如用户在检索、创建、更新信息时,需要提交一些数据
如果我们想在代码逻辑中获取用户提交的数据,可以使用
v-model指令完成
v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素
尽管神奇,但是v-model 本质上不过是语法糖,它负责监听用户输入事件更新数据并对某些特殊场景进行处理
2.v-model的原理
v-model的原理其实是背后有两个操作:
- v-bind绑定value属性的值
- v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中
3.v-model绑定textarea
4.v-model绑定checkbox
单个勾选框:
- v-model即为布尔值
- 此时input的value并不影响v-model的值
多个复选框:
- 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组
- 当选中某一个时,就会将input的value添加到数组中
5.v-model绑定radio
v-model绑定radio,用于选择其中一项
6.v-model绑定select
单选:只能选中一个
- 单选:只能选中一个
- 当我们选中option中的一个时,会将它对应的value赋值到fruit中
多选:可以选中多个值
- v-model绑定的是一个数组
- 当选中多个值时,就会将选中的option对应的value添加到数组fruit中
但是实际开发中,我们的数据可能是来自服务器的,那就需要动态使用v-biand来进行值绑定了
7.v-model修饰符
lazy
默认情况下,
v-model在进行双向绑定时,绑定的是input事件,输入最新值同步更新到绑定的属性里面如果我们在v-model后跟上
lazy修饰符,那么会将绑定的事件切换为change事件,只有在提交时(比如回车) 才会触发;
number
v-model绑定后的值总是string类型,即使在我们设置input的type属性为number也是string类型如果我们希望转换为数字类型,那么可以使用
.number修饰符:
trim
如果要自动过滤用户输入的首尾空白字符,可以给
v-model添加trim修饰符
v-model同样也在组件上使用,后续组件化再说