vueの簡単な登録アカウント

3120 ワード

vueで1つの小さい登録機能を実現してしかも(前の文章の中で登録したコードを発表したことがある)登録することができて、ルートの方式を使わないで、localStorageを使います.setItem()とlocalStorage.getItem()は、ページジャンプのデータ転送を実現し、js部分のコードを貼ります.
var login = new Vue({
		el:'.tb_login',
		data:{
			username1:[], //       
			password1:[], //      
			username:'',
			password:'',
			index:0,
			show:false,
			show1:false,
			show2:false,
			phone:'', //input  v-model  ,      
			pass:'', //input  v-model  ,     
			pass1:'' //input  v-model  ,     
		},
		methods:{
			//         ,      
			regis:function(){
				window.location.href="register.html";
			},
			//              
			login:function(){
				//      username1 password1          
				var userName = JSON.parse(localStorage.getItem('this.username1'));
				var passWord = JSON.parse(localStorage.getItem('this.password1'));
				while(this.index!=userName.length-1 && username1.length!=0){
					this.index++;
				}
				for(var i=0;i<=this.index;i++){
					//        ,           
					if(userName[i]==this.username&&passWord[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;
							},2000);
							break;
						}
					}
				}
			},
			//               
			verrif:function(){
				var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(!reg.test(this.phone)){
					//    ,     
                    this.show=true;
					let self=this;
					//           
					setTimeout(function(){
						self.show=false;
					},2000);
                }else{
                	//                          
                	this.username1.push(this.phone);
                	//        this.username1           
         			localStorage.setItem('this.username1',JSON.stringify(this.username1));
                	window.location.href='password.html';
                }
			},
			//        
			verrify:function(){
				//        6  15   
				if(this.pass.length>=6&&this.pass.length<=15){
					if(this.pass==this.pass1){
						this.password1.push(this.pass);
						//        this.password1           
						localStorage.setItem('this.password1',JSON.stringify(this.password1));
						this.show2=true;
						let self=this;
						//         
						setTimeout(function(){
							window.location.href='login.html';
						},2000);
					}else{
						//           
						this.show1=true;
						let self=this;
						//           
						setTimeout(function(){
							self.show1=false;
						},2000);
					}
				}else{
					//             
					this.show=true;
					let self=this;
					//           
					setTimeout(function(){
						self.show=false;
					},2000);
				}
			}
		}
	});

前にネットでlocalStorageについてたくさん見ました.ここにいるよgetItemの応用ですが、私の困難な問題を解決していないので、先生との検討を経て急にわかった私は、この文章がみんなに役に立つことを望んでいます.