<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-clock>
<form action="">
<fieldset>
<legend>用户注册</legend>
<p>
<span>用户名：</span>
<input type="text" name="user" id="" v-model="user">
</p>
<p>
<span>密码：</span>
<input type="password" name="pwd" id="" v-model="pwd">
</p>
<p>
<span>性别：</span>
<input type="radio" name="a" v-model="sex" value="男">男
<input type="radio" name="a" v-model="sex" value="女">女
</p>
<p>
<span>爱好(多选按钮)：</span>
<input type="checkbox" name="hobby" id="" v-model="hobbies" value="吃">吃
<input type="checkbox" name="hobby" id="" v-model="hobbies" value="玩">玩
<input type="checkbox" name="hobby" id="" v-model="hobbies" value="睡觉">睡觉
<input type="checkbox" name="hobby" id="" v-model="hobbies" value="唱歌">唱歌
</p>
<p>
<button>提交</button>
<button>重置</button>
</p>
<br><br>
<p>用户名：{{user}}</p>
<p>密码：{{pwd}}</p>
<p>性别：{{sex}}</p>
<p>爱好(多选)：{{hobbies}}</p>
</fieldset>
</form>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el: "#app",
data: {
user: "",
pwd: "",
sex: "",
hobbies: []
},
})
</script>
</body>
</html>
