对于初学者来说，检测用户名和密码是否匹配还很难，也很难理解，现在用一种很简单的方式不用请求服务器的情况下检测，我的代码是写的淘宝登录页面（适用于移动端）：

HTML部分：

<div class="taobao_icon"></div>
	<div class="tb_login">
		<input type="text" class="count" placeholder="手机号/邮箱/会员名" v-model="username"/>
		<input type="password" class="count" placeholder="请输入密码" v-model="password"/>
		<div class="tb_el">
			<span class="tb_el_tit">免费注册</span>
			<span class="tb_el_tit">忘记密码</span>
		</div>
		<div class="login_nav" @click="login()">登录</div>
		<div class="login_nav login_nav1">短信验证码登录</div>
		<div class="login_fal" v-show="show" v-cloak>用户名或密码出现错误，请重新输入</div>//v-cloak解决页面刷新时闪现已隐藏部分
</div>
<script src="TB.js"></script>
<script src="vue.js"></script>

/*登录模块*/
.taobao_icon{
	width:69px;
	height:69px;
	background:url(fl_images/taobao.gif) no-repeat;
	background-size:69px 69px;
	margin:38px auto;
}
.count{
	display:block;
	width:87.5%;
	height:26px;
	border:none;
	margin:34px auto 16px;
	border-bottom:1px solid #ff5000;
	/*border-radius:5px;*/
	outline:none;
}
/*修改提示文字的颜色*/
input::-webkit-input-placeholder { /* WebKit browsers */ 
	color:#b5b5b5;
} 
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
	color:#b5b5b5;
} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
	color:#b5b5b5;  
} 
input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
	color:#b5b5b5;
} 
.tb_el{
	margin:0 auto;
	display:box;
	display: -webkit-box;
	display: -o-box;
	display: -moz-box;
}
.tb_el .tb_el_tit:first-child{
	margin-right: 56.25%;
	margin-left: 6.9%;
}
.tb_el_tit{
	display: block;
	color:#555;
	font-size:8px;
	box-flex: 1.0;
	-webkit-box-flex: 1.0;
	-moz-box-flex: 1.0;
	-o-box-flex: 1.0;
}
.login_nav{
	background: -webkit-linear-gradient(left,#ff8e01,#ff5100);  
    background: -o-linear-gradient(left,#ff8e01,#ff5100);  
    background: -moz-linear-gradient(left,#ff8e01,#ff5100);  
    background: -mos-linear-gradient(left,#ff8e01,#ff5100);  
    background: linear-gradient(left,#ff8e01,#ff5100);  
	width:87.5%;
	color:#fff;
	border-radius:20px;
	height:40px;
	line-height: 40px;
	font-size: 10px;
	text-align: center;
	margin:35px auto;
}
.login_nav1{
	background:#fff;
	color:#ff5000;
	border:1px solid #ff5000;
}
/*解决隐藏部分闪现问题*/
[v-cloak]{  
        display : none;  
} 

vue.js部分

var login = new Vue({
		el:'.tb_login',
		data:{
			username1:['111','222','333'],
			password1:['111','222','333'], //存储用户名和密码的数据，随意填写
			username:'',
			password:'',
			index:0, //设置默认index值
			show:false //隐藏提示框
		},
		methods:{
			//点击登录按钮验证用户名和密码
			login:function(){
				while(this.index!=this.username1.length-1){
					this.index++;
				}
				for(var i=0;i<=this.index;i++){
					//登录成功时的条件，并在匹配成功后停止循环
					if(this.username1[i]==this.username&&this.password1[i]==this.password){
						window.location.href="TB.html";
						//匹配成功进入淘宝首页
						break;
					}else{
						//当循环的i值不等于this.index值时，继续循环但不输出
						if(i!=this.index)
							continue;
						//匹配失败，弹出提示框
						else{
							//用户名和密码不匹配时弹出提示框
							this.show=true;
							let self=this;
							//弹出的提示一秒后消失
							setTimeout(function(){
								self.show=false;
							},1000);
							break;
						}
					}
				}
			}
		}
});