基于vue实现简单登录方式的切换

星光宇辰

已于 2022-03-10 22:43:25 修改

阅读量1.9k

点赞数 2

分类专栏： web前端应用实例文章标签： vue.js elementui javascript

于 2022-03-01 14:49:53 首次发布

本文链接：https://blog.csdn.net/NXBBC/article/details/123205893

版权

web前端应用实例专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<body>
		<span id="app">
			<div v-if="isMovePage===false">
				<!-- 通过key属性可控制组件是否复用，这里是控制输入组件值在切换后是否保存，key相同则复用，不同则不复用 -->
				<span v-if="type==='username'">
					<label>用户账号：</label>
					<input placeholder="用户账号" ref="message" key="a" />
				</span>
				<span v-else>
					<label>邮箱地址：</label>
					<input placeholder="邮箱地址" ref="emailMessage"  key="a"/>
				</span>
				<button @click="login">登录</button>
				<button @click="change">切换类型</button>
			</div>
			<div v-if="isMovePage===true">欢迎登录</div>
		</span>

		<script src="../js/v2.6.10/vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					type: 'username',   //登录方式
					isMovePage: false,  //登录后页面转换的标识符
					isEmail: false      //判断是否是email登录方式的标识符
				},
				computed: {},
				methods: {
					change() {
						// 
						this.type = this.type === 'email' ? 'username' : 'email';
						if (this.type == 'email') {
							this.isEmail = true;
							// this.$refs.message.value='';
						} else {
							this.isEmail = false;
							//this.$refs.emailMessage.value='';可控制input内的内容
						}
						
						console.info('切换到' + this.type + '模式');
					},
					login() {
						if (this.isEmail==true) {
							// 此处可设置邮箱账号密码
							if (this.$refs.emailMessage.value == "123") {
								this.isMovePage = true;
								console.log('登陆成功');
							}
						} 
						if(this.isEmail==false){
							// 此处可设置用户账号密码
							if (this.$refs.message.value == "nxb") {
								this.isMovePage = true;
								console.log('登陆成功');
							}
						}
					}
				},
			});
		</script>
	</body>