提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js：用户登录切换的小案例小问题处理

VueJS案例 处理 用户 登录 切换 问题
2023-09-27 14:22:47 时间

问题

当在用户账号中输入数值后发现需要切换用户邮箱登录时，切换后之前的内容不会被清除掉，所以会存在这样一个小问题。

解决问题

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>用户登录切换的小案例小问题的处理</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span v-if = "isUser">
				<label for="username">用户账号</label>
				<input type="text" id="username" placeholder="用户账号" key = "username" />
			</span>
			<span v-else>
				<label for="email">用户邮箱</label>
				<input type="text" id="email" placeholder="用户邮箱" key = "email">
			</span>
			<button @click = "UserName">切换类型</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					isUser:true
				},
				methods:{
					UserName() {
						this.isUser = !this.isUser;
					}
				}
			});
		</script>
	</body>
</html>

相关文章