📑前言
本文主要是【Vue】——Vue实现简单用户登录页面的文章，如果有什么需要改进的地方还请大佬指出⛺️
🎬作者简介：大家好，我是听风与他🥇
☁️博客首页：CSDN主页听风与他
🌄每日一句：狠狠沉淀，顶峰相见
目录
- 📑前言
- 页面要求：
- Vue实现代码:
- 登录页面
- 登录提示
- 登录成功页面
- 点击退出-页面
- 📑文章末尾
页面要求：
- 登录页面需要有标题，用来提示用户当前的登录状态
- 在未登录时，需要有两个输入框和登录按钮供用户输入账号、密码以及进行登录操作。
- 在登录完成后，输入框需要隐藏,需要提供按钮让用户登出
Vue实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue用户登录</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application" style="text-align: center;">
<!-- 标题 -->
<h1>{{title}}</h1>
<!-- 账号和密码输入组件 -->
<div v-if="noLogin">账号:<input v-model="username" type="text"></div>
<div v-if="noLogin">密码:<input v-model="password" type="password"></div>
<div v-on:click="click" style="border-radius: 30px;width: 100px;margin: 20px auto;color: white;
background-color: blue;">{{buttonTitle}}</div>
</div>
<script>
const App = {
// 定义页面所需要的数据
data(){
return{
title:'欢迎您：未登录',
noLogin:true,
username:'',
password:'',
buttonTitle:'登录'
}
},
methods:{
// 单击登录执行按钮执行的方法
click(){
if(this.noLogin){
this.login()
}else{
this.logout()
}
},
// 定义登录操作所执行的函数
login(){
// 判断账号密码是否为空
if(this.username.length > 0 && this.password.length > 0){
// 模拟登录操作，进行弹窗提示
alert(`userName:${this.username} password:${this.password}`)
this.noLogin = false
this.title = `欢迎您:${this.username}`
this.buttonTitle = '退出'
this.username = ''
this.password = ''
}else{
alert('请输入账号密码')
}
},
// 定义登出操作所执行的函数
logout(){
//清空登录数据
this.noLogin = true
this.title = '欢迎您,未登录'
this.buttonTitle = '登录'
}
}
}
// vue组件绑定
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
登录页面
登录提示
登录成功页面
点击退出-页面
📑文章末尾
文章出处登录后可见！
已经登录？立即刷新
