Hello,又见面了,我是渔戈!

今天我们来讲讲 Vue3 的 v-model!

1.什么是 v-model??

在表单输入元素或组件上创建双向绑定。

• 期望的绑定值类型：根据表单输入元素或组件输出的值而变化

• 仅限：

• <input>
  

• <select>
  

• <textarea>
  

• components

• 修饰符：

• .lazy ——监听 change 事件而不是 input
  

• .number ——将输入的合法符串转为数字

• .trim ——移除输入内容两端空格

2.v-model 的基本使用

• 表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

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

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

• 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用 v-model 指令来完成：

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

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

• 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

2.1v-model 的原理

• 官方有说到，v-model 的原理其实是背后有两个操作：

• v-bind 绑定 value 属性的值；

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

3.v-model 绑定 textarea

• 我们再来绑定一下其他的表单类型：textarea、checkbox、radio、select

• 我们来看一下绑定 textarea：

4.v-model 绑定 checkbox

• 我们来看一下 v-model 绑定 checkbox：单个勾选框和多个勾选框

• 单个勾选框：

• v-model 即为布尔值

• 此时 input 的 value 并不影响 v-model 的值

• 多个复选框：

• 当是多个复选框时，因为可以选中多个，所以对应的 data 中属性是一个数组。

• 当选中某一个时，就会将 input 的 value 添加到数组中。

5.v-model 绑定 radio

• v-model 绑定 radio，用于选择其中一项；

6.v-model 绑定 select

• 和 checkbox 一样，select 也分单选和多选两种情况。

• 单选：只能选中一个值

• v-model 绑定的是一个值

• 当我们选中 option 中的一个时，会将它对应的 value 赋值到 fruit 中；

• 多选：可以选中多个值

• v-model 绑定的是一个数组；

• 当选中多个值时，就会将选中的 option 对应的 value 添加到数组 fruit 中；

7.v-model 的值绑定

• 目前我们在前面的案例中大部分的值都是在 template 中固定好的：

• 比如 gender 的两个输入框值 male、female；

• 比如 hobbies 的三个输入框值 basketball、football、tennis；

• 在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到 data 返回的对象中，再通过 v-bind 来进行值的绑定，这个过程就是值绑定

• 这里不再给出具体的做法，因为还是 v-bind 的使用过程。

8.v-model 修饰符 - lazy

• lazy 修饰符是什么作用呢？

• 默认情况下，v-model 在进行双向绑定时，绑定的是 input 事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；

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

9.v-model 修饰符 - number

• 我们先来看一下 v-model 绑定后的值是什么类型的：

• message 总是 string 类型，即使在我们设置 type 为 number 也是 string 类型；

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

• 另外，在我们进行逻辑判断时，如果是一个 string 类型，在可以转化的情况下会进行隐式转换的

下面的 score 在进行判断的过程中会进行隐式转化:

10.v-model 修饰符 - trim

• 如果要自动过滤用户输入的守卫空白字符，可以给 v-model 添加 trim 修饰符：

当然了,v-model 也可以在组件中使用,相关的内容后面会讲到,今天的学习就到此为止啦,有什么问题的小伙伴可以在评论区留言!

相关文章:

原来Vue3的computed属性还能这么用啊🔥

邂逅Vue3

Vue3的基本指令

Vue3:认识侦听器watch🔥