使用 v-model 对表单数据自动收集，v-model 能轻松实现表单输入和应用状态之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form @submit.prevent="handleSubmit">
<span>用户名:</span>
<input type="text" v-model="user.userName"><br>
<span>密码:</span>
<input type="password" v-model="user.pwd"><br>
<span>性别:</span>
<input type="radio" id="female" value="female" v-model="user.gender">
<label for="female">女</label>
<input type="radio" id="male" value="male" v-model="user.gender">
<label for="male">男</label><br>
<span>兴趣：</span>
<input type="checkbox" id="basketball" value="basketball" v-model="user.hobbys">
<label for="basketball">篮球</label>
<input type="checkbox" id="football" value="football" v-model="user.hobbys">
<label for="football">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="user.hobbys">
<label for="pingpang">乒乓球</label><br>
<span>城市：</span>
<select v-model="user.selCityId">
<option value="">未选择</option>
<option v-for="city in citys" :value="city.id">{{city.name}}</option>
</select><br>
<span>介绍:</span><br>
<textarea rows="5" cols="30" v-model="user.desc"></textarea><br>
<input type="submit" value="注册">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
user:{
userName:'',
pwd:'',
gender:'female',
hobbys:[],
selCityId:'',
desc:''
},
citys:[{id:01,name:"北京"},{id:02,name:"上海"},{id:03,name:"新加坡"}],
},
methods:{
handleSubmit(event){
console.log(JSON.stringify(this.user));
}
}
})
</script>
</body>
</html>
打印结果：
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件
text 和 textarea 元素使用 value property 和 input 事件
checkbox 和 radio 使用 checked property 和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
修饰符
① .lazy：在默认情况下，v-model 在每次事件触发后将输入框的值与数据进行同步，可以添加 lazy 修饰符，从而转为在 changes 事件之后进行同步
② .number ，如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
③ .trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
