vue获取手机验证码

验证码

<div id="verifyCode">
	<div class="inputCode">
		<span>验证码</span>
		<input type="text" class="verifyBox" placeholder="请输入验证码" maxlength="4" value="{securityCode}" v-model="securityCode">
		<div class="gain" v-show="showGain" @click="clickGain">获取验证码</div>
		<div class="gain " v-show="showTime">{{time}}s</div>
		<div class="gain " v-show="showRegain" @click="clickRegain">重新获取</div>
	</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
	const defatultTime = 60; // 默认倒计时时间
	var wap = new Vue({
		el: "#verifyCode",
		data: {
			securityCode: "", //验证码  
			time: defatultTime, //时间
			showGain: true, // 是否显示获取验证码
			showTime: false, // 是否显示时间
			showRegain: false, //是否显示重新获取
		},
		methods: {
			clickGain(){ // 点击获取验证码
				this.showGain = false; //隐藏获取验证码
				this.showTime = true; //显示时间
				this.setTime();
			},
			setTime(){ // 	时间设置
				var that = this;
				if (that.time <= 0) { // 倒计时结束
					that.gain = false; //隐藏获取验证码
					that.showTime = false; // 隐藏时间,显示重新获取
					that.showRegain = true; // 显示重新获取
					that.time = defatultTime; // 恢复原始倒计时时间
					clearTimeout(temTime); // 清除setTimeout事件
					return false;
				} else {
					temTime = setTimeout(function() {
					that.time = --that.time;
					console.log("time:" + that.time);
					that.setTime(); // 递归调用本身
				}, 1000)
		 }
	},
		clickRegain() { //点击重新获取
			this.showTime = true; //显示时间
			this.showRegain = false; //隐藏重新获取
			this.setTime();
		}
	}
	})
</script>

两次密码是否一致

<div class="inputCode">
	<span>设置密码</span>
	<input type="password" placeholder="请输入六位数字密码" maxlength="6" value="{pSix}" v-model="pSix">
</div>
<div class="inputCode">
	<span>确认密码</span>
	<input type="password" placeholder="请再次输入密码" maxlength="6"  value="{comfirmPassw}" v-model="comfirmPassw">
</div>
<div class="submit" @click="comfirm()">确认</div>
<script type="text/javascript">
		var wap = new Vue({
		el: "#register",
		data: {
			pSix:"",//输入六位密码
			comfirmPassw:""//确认密码
		},
		computed:{
			comfirm(){
				if(this.pSix !== this.comfirmPassw){
					alert('密码不一致！')
				}else{
					alert('已绑定支付宝账号将为您跳转至体现页面')
				}
			}
		}
})
</script>