Vue3 入门指北(八)v-model
前言
假如我们有一个表单输入框,在进行表单处理的时候,我们想把输入框的内容同步的更新到定义的JavaScript
变量时,我们可能会如下写:
复制代码
不过对于这种情况,vue 做了相应的简化,通过一个v-model
指令即可实现。
复制代码
当然,对于textarea
、<input type="checkbox">
、 <input type="radio">
以及<select>
都可以使用v-model
指令,他会根据你所使用的标签同步的使用相应的事件。
v-model
当我们使用textarea
的时候,我们需要主义的是,他并不支持表达式:
复制代码
相应的,需要通过v-model
来实现。
v-model 与 select
当我们使用 v-model 与 select 结合的时候,需要注意一点,当v-mode
的初始值没有和 select
中的任何一项匹配时,select
会渲染成一个 未选择的状态。这在 ios 上 会导致无法选择第一项,因为他并不会触发 change 事件。所以这种情况下,可以提供一个 为空值的禁用选项,解决这个问题:
复制代码
修饰符
vue 官方也为v-model
指令,提供了一些修饰符,便于其的操作。
.lazy
看过上面的实例,我们知道v-mode
是通过input
事件进行更新的。但是如果我们想通过 change 事件进行更新的话,可以添加lazy
修饰符。
复制代码
.number
通过number
可以将输入的自动转换为数字。
复制代码
.trim
通过trim
修饰符,可以很好的去除用户输入内容两端的空格。
复制代码
评论