解决了什么问题
Vue.js 的 v-model
指令解决了在表单元素(如输入框、单选框、复选框等)和 Vue.js 组件之间双向绑定的问题。
使用 v-model
可以将表单元素的值与 Vue.js 实例的数据进行绑定,从而实现数据的双向绑定。
这样,当表单元素的值发生变化时,Vue.js 实例中对应的数据也会随之变化;反之,当 Vue.js 实例中对应的数据发生变化时,表单元素的值也会随之变化。这样,我们就不需要手动监听表单元素的 input
事件,然后将表单元素的值赋值给 Vue.js 实例中对应的数据,也不需要手动监听 Vue.js 实例数据的变化,然后将数据的值赋值给表单元素。
doc:组件 v-model | Vue.js (vuejs.org)
model 的本质
vue model 的本质是一个语法糖,使你不需要绑定元素值,和监听事件
<div class="form-item">
<label>密码</label>
<input
type="password"
:value="formData.loginPwd"
@input="formData.loginPwd=$event.target.value"
/>
</div>
// 使用Model
<div class="form-item">
<label>密码</label>
<input
type="password"
v-model="formData.loginPwd"
/>
</div>
效果图
左边:表单 右边:绑定数据源
checkbox radio 元素的绑定
checkbox 当元素的value 存在v-model里面就会被选择,否则为不选择
<div class="form-item">
<label>爱好</label>
<label>
<input type="checkbox" value="sports" v-model="formData.loves" />
运动
</label>
<label>
<input type="checkbox" value="movie" v-model="formData.loves" />
电影
</label>
<label>
<input type="checkbox" value="music" v-model="formData.loves" />
音乐
</label>
<label>
<input type="checkbox" value="other" v-model="formData.loves" />
其他
</label>
</div>
radio同理, 这里radio 都没有设设置name ,但是它们是互斥的,因为当value等于v-model时就会被选择
<div class="form-item">
性别:
<label>
<input type="radio" v-model="formData.sex" value="male" />
男
</label>
<label>
<input type="radio" v-model="formData.sex" value="female" />
女
</label>
</div>
修饰符
v-model
指令提供了一些修饰符,它们可以用来改变双向绑定的行为。下面是三个常用的修饰符:
-
.lazy
修饰符默认情况下,
v-model
指令在每次输入事件触发时将表单元素的值同步到 Vue.js 实例中对应的数据。而使用.lazy
修饰符可以将同步的时机改为表单元素失去焦点时。这样可以避免过多的更新操作,提高性能。
<input v-model.lazy="message">
-
.number
修饰符默认情况下,
v-model
指令将表单元素的值作为字符串进行绑定。而使用.number
修饰符可以将绑定的值转换为数字类型。
<input v-model.number="age" type="number">
-
.trim
修饰符默认情况下,
v-model
指令不会对表单元素的值进行修饰。而使用.trim
修饰符可以将绑定的值去除首尾空格。
<input v-model.trim="username">