vue中获取验证码效果

这块的功能非常简单，只是挑出来做个备份，方便以后其他项目用到。
用的vue的框架，所以只展示功能部分代码.
UI是自己写的，可以用自己的。

 <div class="row inputRow">
      <label for="dianhua" class="col-2 col-form-label">电话</label>
      <div class="col-6">
        <input class="form-control m-input"  placeholder="请输入手机号" type="text" v-model="mainData.dianhua"  id="dianhua">
      </div>
	  <div class="col-2">
	    <button type="button" class="btn m-btn bs-ok-default"  id = "huoquyanzhengma" name = "huoquyanzhengma" @click="getCode()" >获取验证码</button>
		<button type="button" class="btn m-btn bs-ok-default"  id = "daojishibtn" name = "daojishibtn" style="display:none;"><span id="daojishi">5</span>秒后重发</button>
	  </div>
    </div>
	<div class="row inputRow">
	  <label for="gonghao" class="col-2 col-form-label">验证码</label>
	  <div class="col-10">
	    <input class="form-control m-input"  placeholder="请输入验证码" type="text"   id="yanzhengma">
	  </div>
	</div>

js部分

data () {
    return {
    
	  isPhone : 1,
    
    }
  },
methods:{
	/*获取验证码*/
	getCode(){
		this.checkPhone(); //验证手机号码
		if(this.isPhone){
			this.resetCode(); //倒计时
		}else{
			document.getElementById('dianhua').focus();
		}
		
	},
	//验证手机号码
	checkPhone(){
		var phone = document.getElementById('dianhua').value;
		var pattern = /^1[0-9]{10}$/;
		this.isPhone = 1;
		if(phone == '') {
			alert('请输入手机号码');
			this.isPhone = 0;
			return;
		}
		if(!pattern.test(phone)){
			alert('请输入正确的手机号码');
			this.isPhone = 0;
			return;
		}
	},
	//倒计时
	resetCode(){
		document.getElementById('huoquyanzhengma').style.display='none';
		document.getElementById('daojishi').innerHTML=5;
		document.getElementById('daojishibtn').style.display='block';
		
		var second = 5;
		var timer = null;
		timer = setInterval(function(){
			second -= 1;
			if(second >0 ){
				document.getElementById('daojishi').innerHTML=second;
			}else{
				clearInterval(timer);
				document.getElementById('huoquyanzhengma').style.display='block';
				document.getElementById('daojishibtn').style.display='none';
				
			}
		},1000);
	},
}

效果