版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cristina_song/article/details/81904391
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue起步学习</title>
<script src="./js/vue.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<p id="root"><input type="text" placeholder="图片验证码"> <i @click="getCode">{{yzm}}</i></p>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#root',
data(){
return{
yzm:'获取验证码'
}
},
methods:{
getCode:function(){
if(this.yzm=='获取验证码'){
const TIME_COUNT = 5;
if (!this.timer) {
this.yzm = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.yzm > 0 && this.yzm <= TIME_COUNT) {
this.yzm--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}if (this.yzm ==0){
this.yzm="获取验证码"
}
}, 1000)
}
}
}
}
})
</script>