使用v-model(双向数据绑定)自动收集数据
text/textarea
checkbox
radio
select
<input type="text"/>
,则v-model收集的是value值,用户输入的就是value值。
<input type="radio"/>
,则v-model收集的是value值,且要给标签配置value值。
<input type="checkbox"/>
- 没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
- 配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组!!!
备注:v-model的三个修饰符:
lazy
:失去焦点再收集数据number
:输入字符串转为有效的数字trim
:输入首尾空格过滤
示例
<body>
<div id="demo">
<form action="/xxx" @submit.prevent="handleSubmit">
<span>用户名:</span>
<input type="text" v-model="username"><br>
<span>密码</span>
<input type="password" v-model="pwd"><br>
<span>性别:</span>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label><br>
<span>爱好:</span>
<input type="checkbox" id="basket" value="basket" v-model