Vue中的表单输入绑定,双向绑定方式
作者：天马3798
这篇文章主要介绍了Vue中的表单输入绑定,双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、v-model 指令
- 用于Vue 表单双向绑定
- 用户Vue 组件属性双向绑定
v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。
它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：
- 文本类型的
<input>和<textarea>元素会绑定valueproperty 并侦听input事件； <input type="checkbox">和<input type="radio">会绑定checkedproperty 并侦听change事件；<select>会绑定valueproperty 并侦听change事件。
二、v-model 使用案例
- 文本
姓名： <input type="text" v-model="student.name">
- 多行文本
简介： <textarea v-model="student.summary"></textarea>
- 单选
所属省份：
<template v-for="item in areas">
<div>
<label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
</div>
</template><script>
export default {
data() {
return {
student: {
name: '张三',
score: 100.5,
password: ' 1234 '
},
age: 10.8,
areas: ['济南', '聊城', '北京']
}
}
}
</script>- 多选
多选省份：
<template v-for="item in areas">
<div>
<label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
</div>
</template>export default {
data() {
return {
student: {
checkvalue:[]//多选框需要对应数组
}
}
}
}- 下拉选择
下拉选择：
<select v-model="student.sel">
<option :value="item" v-for="item in areas">{{ item }}</option>
</select>三、v-model 修饰符
.lazy
- 默认情况下，
v-model会在每次input事件后更新数据 (IME 拼字阶段的状态例外)。 - 你可以添加
lazy修饰符来改为在每次change事件后更新数据：
<!-- 在 "change" 事件后同步更新而不是 "input" --> <input v-model.lazy="msg" />
.number
- 如果你想让用户输入自动转换为数字。
- 你可以在
v-model后添加.number修饰符来管理输入：
<input type="number" v-model.number="student.score">
- 如果该值无法被 parseFloat() 处理，那么将返回原始值。
- 特别是当输入为空时 (例如用户清空输入字段之后)，会返回一个空字符串。
注意：要制定type=number html属性
.trim
- 如果你想要默认自动去除用户输入内容中两端的空格。
- 你可以在
v-model后添加.trim修饰符：
<input v-model.number="student.password">
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。