写点什么

你真的了解 v-model 吗🔥

作者:渔戈
  • 2022-10-24
    广东
  • 本文字数:1455 字

    阅读完需:约 5 分钟

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🔥

发布于: 刚刚阅读数: 4
用户头像

渔戈

关注

还未添加个人签名 2022-10-14 加入

还未添加个人简介

评论

发布
暂无评论
你真的了解v-model吗🔥_前端_渔戈_InfoQ写作社区