<div id="app">
<form action="">
<fieldset>
<legend>用户注册</legend>
<p>用户名：<input type="text" v-model="user" name="user"></p>
<p>密码框<input type="password" v-model="pwd" name="pwd"></p>
<p>性别：
<input type="radio" name="a" v-model="sex" value="男">男
<input type="radio" name="a" v-model="sex" value="女">女
</p>
<p>爱好：
<input type="checkbox" v-model="arr" value="篮球" name="aihao">篮球
<input type="checkbox" v-model="arr" value="排球" name="aihao">排球
</p>
<p>
<button>提交</button>
<input type="reset" value="重置" @click="fn">
</p>
</fieldset>
</form>
表单内容如下：
<p>
用户名：{{user}}
</p>
<p>
密码：{{pwd}}
</p>
<p>
性别：{{sex}}
</p>
<p>
爱好：{{arr}}
</p>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el: "#app",
data: {
user: "",
pwd: "",
sex: "",
arr: []
},
methods:{
fn(){
this.user = '';
this.pwd= '';
this.sex= '';
this.arr= [];
}
}
})
</script>
