纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue倒计时小功能 Vue实现倒计时小功能

王冰涛涛涛   2021-09-14 我要评论
想了解Vue实现倒计时小功能的相关内容吗,王冰涛涛涛在本文为您仔细讲解Vue倒计时小功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue,倒计时,下面大家一起来学习吧。

很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!!

例、代码如下:

要求:点击提交按钮倒计时五秒,倒计时期间输入框和提交按钮禁用,倒计时结束后输入框和提交按钮再变成正常状态

1、先实现要求的html布局,添加点击事件

<div>
    <!-- disabled为true禁用 -->
    输入框:<input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">提交</button>
    <!-- 倒计时文字提示 -->
    <p>{{this.txt}}</p>
</div>

2、点击提交按钮倒计时开始变禁用状态,定义一个计时器

<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //定义n=5秒
      let n=5
      //定义定时器time
      let time=setInterval(()=>{
        //禁用
        this.istrue=true
        //改变倒计时文字提示
        this.txt=n+'秒后提交'
        n--
        //如果n<0,清除定时器,禁用状态取消,文字提示为空(不显示)
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

思路步骤都写在上方注释里了,一个简单的倒计时就这样轻易实现了。

整体代码:

<template>
  <div>
    <!-- disabled为true禁用 -->
    输入框:<input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">提交</button>
    <!-- 倒计时文字提示 -->
    <p>{{this.txt}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //定义n=5秒
      let n=5
      //定义定时器time
      let time=setInterval(()=>{
        //禁用
        this.istrue=true
        //改变倒计时文字提示
        this.txt=n+'秒后提交'
        n--
        //如果n<0,清除定时器,禁用状态取消,文字提示为空(不显示)
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

相关文章

猜您喜欢

网友评论

Copyright 2020 www.hris-software.net 【幸运软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式