Vue3的表单绑定(四)

743 阅读2分钟

1.v-model的基本使用

表单提交是开发中非常常见的交互功能

比如用户在登录、注册时需要提交账号密码

比如用户在检索、创建、更新信息时,需要提交一些数据

如果我们想在代码逻辑中获取用户提交的数据,可以使用v-model指令完成

v-model指令可以在表单 inputtextarea以及select元素上创建双向数据绑定

它会根据控件类型自动选取正确的方法来更新元素

尽管神奇,但是v-model 本质上不过是语法糖,它负责监听用户输入事件更新数据并对某些特殊场景进行处理

image-20220129164756045

2.v-model的原理

v-model的原理其实是背后有两个操作:

  • v-bind绑定value属性的值
  • v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中

image-20220129164515443

3.v-model绑定textarea

image-20220129165624310

4.v-model绑定checkbox

单个勾选框:

  • v-model即为布尔值
  • 此时input的value并不影响v-model的值

多个复选框:

  • 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组
  • 当选中某一个时,就会将input的value添加到数组中

image-20220129165916012

5.v-model绑定radio

v-model绑定radio,用于选择其中一项

image-20220129170117587

6.v-model绑定select

单选:只能选中一个

  • 单选:只能选中一个
  • 当我们选中option中的一个时,会将它对应的value赋值到fruit中

多选:可以选中多个值

  • v-model绑定的是一个数组
  • 当选中多个值时,就会将选中的option对应的value添加到数组fruit中

image-20220129170518893

但是实际开发中,我们的数据可能是来自服务器的,那就需要动态使用v-biand来进行值绑定了

7.v-model修饰符

lazy

默认情况下,v-model在进行双向绑定时,绑定的是input事件,输入最新值同步更新到绑定的属性里面

如果我们在v-model后跟上lazy修饰符,那么会将绑定的事件切换为 change 事件,只有在提交时(比如回车) 才会触发;

image-20220129170916266

number

v-model绑定后的值总是string类型,即使在我们设置inputtype属性为number也是string类型

如果我们希望转换为数字类型,那么可以使用 .number 修饰符:

image-20220129171104588

trim

如果要自动过滤用户输入的首尾空白字符,可以给v-model添加 trim 修饰符

image-20220129171155914

v-model同样也在组件上使用,后续组件化再说