<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="form">
<label>用户名:</label><input type="text" v-model="message" placeholder="edit message">
<label>密码:</label><input type="password" v-model="password">
<label>邮箱:</label><input type="email" v-model="email">
<label>性别:</label><label for="male">男</label><input type="radio" id="male" value="male" v-model="picked">
<label for="female">女</label><input type="radio" id="female" value="female" v-model="picked">
<label>兴趣:</label><input type="checkbox" id="run" value="跑步" v-model="checkArray"><label for="run">跑步</label>
<input type="checkbox" id="pingpang" value="乒乓" v-model="checkArray"><label for="pingpang">乒乓</label>
<input type="checkbox" id="swimming" value="游泳" v-model="checkArray"><label for="swimming">游泳</label>
<select v-model="selected" style="width: 50px;">
<option v-for="item in values">{{item}}</option>
</select>
<!-- <button v-on:click="submit">提交</button> -->
<button @click="submit">提交</button>
</div>
<script>
var vm = new Vue({
el: "#form",
data: {
message: "hello world",
password: "1234567890",
email: "",
picked: "female",
checkArray: [],
selected: "北京",
values: ["北京", "天津", "重庆"],
},
methods:{
submit:function(){
console.log(this.$data);
}
}
});
</script>
</body>
</html>
v-model介绍
原文：https://www.cnblogs.com/kukai/p/12386058.html
