版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单双向数据绑定</title>
<!-- 导入vue -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{user}}
<form action="" @submit.prevent="handler">
姓名 <input type="text" v-model="user.name"> <br>
密码 <input type="password" v-model="user.password"> <br>
//复选框和单选框，每个inpit都要绑定v-model
性别
<label> <input type="radio" v-model="user.gender" value="男">男</label>
<label> <input type="radio" v-model="user.gender" value="女">女</label>
<br>
爱好
<label><input type="checkbox" v-model="user.hobbies" value="篮球">篮球</label>
<label><input type="checkbox" v-model="user.hobbies" value="足球">足球</label>
<label><input type="checkbox" v-model="user.hobbies" value="阅读">阅读</label>
<br>
地址
<select v-model="user.address">
<option value="山西">山西</option>
<option value="江西">江西</option>
<option value="甘肃">甘肃</option>
</select>
<br>
介绍
<textarea v-model="user.description" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="提交">
</form>
</div>
<script>
new Vue({
el:"#app",
data:{
user:{
gender:"女", //默认值
hobbies:["足球"] //复选框，声明一个数组存放数值，里面的数据为默认值
}
},
methods:{
handler(){
alert(JSON.stringify(this.user)); //提交，打印出user
}
}
})
</script>
</body>
</html>