目前只有单个组件，仅供参考，挪用请点赞~~~
内容：
（1）、登录页面需要有标题，用来提醒用户当前状态。
（2）、在未登录时，需要有两个输入框分别输入账号，密码以及的登录按钮
（3）、在完成登录后，输入框需要隐藏，需要提供按钮让客户退出
下面是代码部分：
1、<head>部分
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
2、<body>部分
<div id="zujian" 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>
<!-- 此处的V-on 不能简写成@会造成监控失败 原因不知道
-->
</div>
<script>
//定义一个组件 取名elo
const elo ={
data () {
return {
title:"欢迎光临：未登录",
noLogin:true,
userName: '',
password: '',
buttonTitle: '登 录'/* */
}
},
methods: {
click () {
if(this.noLogin){//this.noLogin值为真 更改大标题
this.login()
}else {
this.logout() //this.noLogin值为假
}
},
//登陆部分
login() {
//判断账号、密码是不是空
if(this.userName.length>0 && this.password.length > 0){
//提示登陆后刷新页面
alert(`userName:${this.userName} password:${this.password}`)
this.noLogin=false//修改this.noLogin 值为假 防止二次登陆
this.title=`欢迎您：${this.userName}`
this.buttonTitle="注销"//此时已经登陆 登陆按钮更改为注销 意义为退出
this.userName=""
this.password=""
}else {
//为空 显示提醒
alert('账号或密码不能为空')
}
},
//注销部分
logout() {
//此时将noLogin的值更改为true 不能登陆
this.noLogin = true
this.title = '欢迎光临：未登录'
this.buttonTitle = '登 录'
}
}
}
Vue.createApp(elo).mount("#zujian")//将此组件绑定到Login元素上
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
