写点什么

Vue3 入门指北(八)v-model

作者:Augus
  • 2022 年 10 月 04 日
    天津
  • 本文字数:745 字

    阅读完需:约 2 分钟

前言

假如我们有一个表单输入框,在进行表单处理的时候,我们想把输入框的内容同步的更新到定义的JavaScript变量时,我们可能会如下写:


<input  :value="text"  @input="event => text = event.target.value">
复制代码


不过对于这种情况,vue 做了相应的简化,通过一个v-model指令即可实现。


<input v-model="text">
复制代码


当然,对于textarea<input type="checkbox"> 、 <input type="radio">以及<select>都可以使用v-model指令,他会根据你所使用的标签同步的使用相应的事件。

v-model

当我们使用textarea的时候,我们需要主义的是,他并不支持表达式:


<!-- 错误 --><textarea>{{ text }}</textarea>
<!-- 正确 --><textarea v-model="text"></textarea>
复制代码


相应的,需要通过v-model来实现。

v-model 与 select

当我们使用 v-model 与 select 结合的时候,需要注意一点,当v-mode的初始值没有和 select中的任何一项匹配时,select会渲染成一个 未选择的状态。这在 ios 上 会导致无法选择第一项,因为他并不会触发 change 事件。所以这种情况下,可以提供一个 为空值的禁用选项,解决这个问题:


<div>选中的值: {{ selected }}</div>
<select v-model="selected"> <option disabled value="">请选择任意一项</option> <option>一</option> <option>二</option> <option>三</option></select>
复制代码

修饰符

vue 官方也为v-model指令,提供了一些修饰符,便于其的操作。

.lazy

看过上面的实例,我们知道v-mode是通过input事件进行更新的。但是如果我们想通过 change 事件进行更新的话,可以添加lazy修饰符。


<input v-model.lazy="message" />
复制代码

.number

通过number可以将输入的自动转换为数字。


<input v-model.number="count" />
复制代码

.trim

通过trim修饰符,可以很好的去除用户输入内容两端的空格。


<input v-model.trim="message" />
复制代码


用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
Vue3入门指北(八)v-model_Vue3_Augus_InfoQ写作社区