代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vue学习</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<form name="loginForm">
<!-- 下拉列表框 -->
身份：
<select name="identity" v-model="identity">
<option value="">请选择身份...</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select><br>
<!-- 文本框 -->
用户名：
<input type="text" v-model="username"><br>
<!-- 密码框 -->
密码：
<input type="password" v-model="password"><br>
<!-- 复选框 -->
<input type="checkbox" v-model="rememberMe">记住我<br>
<!-- 按钮 -->
<input type="button" value="重置" v-on:click="reset()">
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
identity:"管理员",
username: '张三',
password: '12345',
rememberMe:true
},
methods: {
reset:function(){
this.identity="",
this.username="",
this.password="",
this.rememberMe=false
}
}
})
</script>
</body>
</html>
核心代码就是：
功能演示：
