Vue入门1_2

我们可以发现, 当value值等于40的时候, 文字又出来了。

实战:
用Vue框架, 写一个登录功能, 并要求点击登录按钮的时候, 有账号和密码是否正确的判断, 账号和密码自己定义(不需要连接后端数据库之类的)。

先自己动手尝试做一下哦, 不要马上看答案哦。

实战参考答案:

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #f0f0f0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			}

			.wrapper {
				background-color: #fff;
				padding: 20px;
				border-radius: 10px;
				border: 1px solid #ccc;
				width: 250px;
			}

			.input-group {
				margin-bottom: 15px;
			}

			.input-group span {
				font-weight: 700;
				color: #333;
			}

			.input-group input {
				display: block;
				width: 90%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 5px;
			}

			button {
				width: 100%;
				padding: 10px;
				border: none;
				border-radius: 5px;
				background-color: #3498db;
				color: #fff;
				font-size: 16px;
				cursor: pointer;
			}

			button:hover {
				background-color: #2980b9;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="wrapper">
				<div class="input-group">
					<span>用户名</span>
					<input type="text" placeholder="请输入用户名" class="username" v-model="userNameText">
				</div>
				<div class="input-group">
					<span>密码</span>
					<input type="password" placeholder="请输入密码" class="password" v-model="passwordText" @keydown="keyEnter">
				</div>
				<button @click="login">点击登录</button>
			</div>
		</div>
		<script src="vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					userNameText: "",
					passwordText: "",
					userName: "Nathan",
					password: "Nathan123456"
				},
				methods: {
					login() {
						if (this.userNameText.length == 0 || this.userNameText == null) {
							alert("用户名不能为空!");
						}
						if (this.passwordText.length == 0 || this.passwordText == null) {
							alert("密码不能为空!");
						}
						if (this.userNameText !== this.userName) {
							alert("用户不存在");
						} else {
							if (this.passwordText === this.password) {
								alert("登录成功!");
							} else {
								alert("密码不正确!");
							}
						}
					},
					keyEnter(e){
						if(e.key === "Enter"){
							this.login();
						}
					}
				}
			});
		</script>
	</body>
</html>

结果:
当用户名和密码都是正确的时候

当密码不正确时

当账号输入框里面输入的账号没有在data数据源里面的时候(相当于账号不正确)

当账号和密码都不正确时(会弹出用户不存在)

这里说明一下, keyEnter(e)这个是监听键盘事件的。

javascript 复制代码

keyEnter(e){
	if(e.key === "Enter"){
		this.login();
	}
}

e.key这个是获取键盘输入的按键, 比如输入了回车, 就会返回Enter这个值, 判断返回值是否等于Enter, 就等于说在if里面的代码块, 再密码输入框里面按Enter回车键的时候执行的代码。
因为在第二个<input type="password" placeholder="请输入密码" class="password" v-model="passwordText" @keydown="keyEnter">这个输入框里面绑定了一个@keydown="keyEnter"事件(键盘事件), 所以光标在密码框里面, 按Enter会触发键盘事件, 而在第一个用户名输入框里面, 按下Enter回车键, 不能触发键盘事件。

你写出来了吗?如果写出来的话, 给自己一个掌声哦。👏

以上就是Vue入门1的所有内容了, 如果有哪里不懂的地方,可以随时联系我, 我的qq号是1175235190, qq邮箱是1175235190@qq.com, 欢迎随时来提问题!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!

上一个

Vue入门1_1

下一个

Vue入门2

最近修改: 2024-09-15Powered by

所有分类