本文主要是【Vue】——Vue实现简单用户登录页面的文章,如果有什么需要改进的地方还请大佬指出⛺️
作者简介:大家好,我是听风与他
☁️博客首页:CSDN主页听风与他
每日一句:狠狠沉淀,顶峰相见
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>