使用Vue实现表单的重置

代码如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Vue学习</title>...

二木成林

4028人浏览 · 2020-01-19 08:20:03

二木成林 · 2020-01-19 08:20:03 发布

代码如下：

<!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>

核心代码就是：

功能演示：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^