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

问题

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

解决问题

在这里插入图片描述

代码

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

相关阅读:
人工智能学习：CIFAR-10数据分类识别
Python+AI智能编辑人脸
Pytorch学习（四）
c++能能成功将数据写入TXT文件，但无法读入TXT文件内的数据
激光雷达：Ouster OS产品介绍及使用方法
松江主机联网方案
python读取Excel指定范围并转为数组
利用在线培训系统提升员工技能，助力企业发展
工业化生产预测（xgboost）（笔记版）
致力乡村振兴从玉农业-林裕豪：中国金控优势强化政企合作

原文地址：https://blog.csdn.net/weixin_55804957/article/details/128201137