表单绑定v-model
表单绑定v-model
v-model的引入
- 表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单。
- Vue中使用v-modle可以实现表单元素与数据的双向绑定
什么叫双向绑定?
- 在为文本框绑定v-model属性后,在文本框中输入的任意内容都会的传递给message,message随之发生改变;而手动的改变message也会同时改变文本框中的内容
<p>文本内容是:{{message}}</p>
<input type="text" v-model="message" />
data: {
message: 'Hello'
}
v-bind实际上是一个语法糖,它的背后本质上包含了两个操作:
- 以上面文本框为例:
- v-bind绑定一个value属性,此时value值等于message
- v-on指令给当前元素绑定input事件,此时message等于value值
<input type="text" v-model="message">
等同于
<!-- $event.target.value:触发事件目标的值,本例中即为文本框中的value值。将value值赋给message,此时message=value,动态绑定value,此时value=message,二者之间构成一个双向绑定 -->
<input type="text" :value="message" @input="message = $event.target.value">
v-model
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
- text 和 textarea 元素使用
v-model:radio
<div>
<label for="male">男</label>
<input type="radio" id="male" value="男" v-model="sex">
</div>
<div>
<label for="female">女</label>
<input type="radio" id="female" value="女" v-model="sex">
</div>
<h2>您的性别是:{{sex}}</h2>
data: {
sex: '男'
}
[radio按钮说明]:radio按钮由于默认value为空,因此须分别设置value值,由于v-model绑定的都是sex,因此两个radio按钮已经互斥,不需要再添加name值互斥
v-model:checkbox
- checkbox 分为单选框和单选框
①单选框
-
单选框对应一个布尔值
<label for="agree"> <input type="checkbox" id="agree" value="" v-model="isAgree" />同意协议 </label>
data: { isAgree: false }
②多选框
-
多选框对应一个数组
<input type="checkbox" value="篮球" v-model="hobbies" />篮球 <input type="checkbox" value="足球" v-model="hobbies" />足球 <input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球 <input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球 <h2>选择你的爱好:{{hobbies}}</h2>
data: { hobbies: [] }
v-model:select
- select同样也分为单选和多选
①单选
-
v-model绑定的是一个值。当我们选中选项中的一个时,它就会将对应的value赋值给fruit
<select name="fruits" v-model="fruit"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="梨子">梨子</option> <option value="荔枝">荔枝</option> </select> <h2>您选择的水果是:{{fruit}}</h2>
data: { fruit: '香蕉' }
②多选
-
v-model绑定的是一个数组。当选中多个值时,就会将对应的value都添加进数组
// 多选极为少见,不做介绍
v-model修饰符
①.lazy
-
默认情况下,v-model是在input事件中同步输入框的数据的,也就是说,一旦数据发生改变,data中对应的数据就会同步发生改变
-
lazy修饰符的作用就是让数据在失去焦点或按下回车时才会更新
<input type="text" v-model.lazy="message" />
②.number
-
默认情况下,无论我们在输入框中输入的是字母还是数字,都会被当作字符串处理
-
number修饰符的作用就是让输入框中的内容自动转换为数字类型
<input type="number" v-model.number="message" />
③.trim
-
如果输入内容的首尾有空格,通常情况下,我们希望将去除
-
trim修饰符的作用就是自动去除首尾空格
<input type="text" v-model.trim="message" />
[修饰符组合使用]: 修饰符都是可以组合使用的,如<input type="number" v-model.number.lazy="message" />