vue倒计时60秒改变按钮状态效果demo(整理)

news2024/11/22 6:20:44

在这里插入图片描述

你可以使用Vue的计时器和绑定状态的方法来实现这个功能。
首先,在data中添加一个计时器countdown,初始值为0。
data() {
  return {
    countdown: 0
  }
}
<template>
  <div>
    <button @click="startCountdown" :disabled="countdown > 0">点击开始倒计时</button>
  </div>
</template>
methods: {
  startCountdown() {
    this.countdown = 59 // 设置倒计时为59秒
    const timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      } else {
        clearInterval(timer)
      }
    }, 1000)
  }
}
<template>
  <div>
    <button @click="startCountdown" :disabled="countdown > 0">
      {{ countdown > 0 ? '正在倒计时('+countdown+')秒' : '点击开始倒计时' }}
    </button>
  </div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1374433.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android14之解决Pixel手机联网出现感叹号(一百八十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【数据结构】7大排序最详细

0.前言 接下来进入排序&#xff0c;我们知道在c语言阶段可能就学习过了像冒泡排序&#xff0c;选择排序这种比较简单的排序&#xff0c;那么接下来我们就会学习到更加高级的排序算法。但高级代表着难度的提升&#xff0c;但不用担心&#xff0c;博主会细细来谈&#xff0c;慢慢…

九州金榜如何高质量培养孩子成长

在这个时代&#xff0c;孩子们就像温室里的花朵&#xff0c;被父母和家人宠爱着&#xff0c;享受着最优越的物质条件。 然而&#xff0c;在这样的环境中成长起来的孩子&#xff0c;却往往被很多父母称为"白眼狼"&#xff0c;对孩子的自私行为感到痛苦和失落。 1 随…

zookerper入门

zookerper介绍 ZooKeeper 是一个开源的分布式协调框架,主要用来解决分布式集群中应用系统的一致性问题. ZooKeeper本质上是一个分布式的小文件存储系统&#xff08;Zookeeper文件系统监听机制&#xff09;.提供基于类似于文件系统的目录树方式的数据存储&#xff0c;并且可以…

离线安装telnet-server

telnet下载地址&#xff1a; https://vault.centos.org/ 需要下载telnet 和 telnet-server 确认自己的服务器版本&#xff0c;我这里使用的是&#xff08;Red Hat Enterprise Linux Server release 7.0 (Maipo)&#xff09;对应的是Centos 7.0,所有到 https://vault.centos.or…

HarmonyOS应用开发学习笔记 UI布局学习 创建轮播(Swiper) artTS 轮播组件 简单使用

官方文档 Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件&#xff0c;当设置了多个子组件后&#xff0c;可以对这些子组件进行轮播显示。通常&#xff0c;在一些应用首页显示推荐的内容时&#xff0c;需要用到轮播显示的能力。 1、简单用法 loop 控制是否循环 …

AI交互数字人如何助力职工之家数字化建设?

近日&#xff0c;广州市海珠区产投园区工友之家揭牌&#xff0c;首批“工会数字人”正式揭幕亮相&#xff0c;开启24小时零距离全天候服务职工模式。同步进驻海珠区10个产业园区的其他工会数字人也进入全天候服务状态&#xff0c;职工群众可“一码入会”&#xff0c;工会数字人…

非常好用的个人工作学习记事本Obsidian

现在记事本有两大流派&#xff1a;Obsidian 和Notion&#xff0c;同时据说logseq也很不错 由于在FreeBSD下后两种都没有相关ports&#xff0c;所以优先尝试使用Obsidian Obsidian简介 Obsidian是基于Markdown文件的本地知识管理软件&#xff0c;并且开发者承诺Obsidian对于个…

【算法每日一练]-动态规划 (保姆级教程 篇16) #纸带 #围栏木桩 #四柱河内塔

目录 今日知识点&#xff1a; 计算最长子序列的方案个数&#xff0c;类似最短路径个数问题 四柱河内塔问题&#xff1a;dp[i]min{ (p[i-k]f[k])dp[i-k] } 纸带 围栏木桩 四柱河内塔 纸带 思路&#xff1a; 我们先设置dp[i]表示从i到n的方案数。 那么减法操作中&#xff…

Linux-shell简单学习

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…

学习c语言,强制转换

因为sizeof是无符号数所以-1会转换成无符号数&#xff0c;所以答案是i大于sizeof的

权限维持篇

一、Windows 1、 不死马权限维持 1.1 概述 <?php ignore_user_abort(); //关掉浏览器&#xff0c;PHP脚本也可以继续执行. set_time_limit(0);//通过set_time_limit(0)可以让程序无限制的执行下去 $interval 5; // 每隔*秒运行 do { $filename test.php; if(file_exi…

Mysql——索引相关的数据结构

索引 引入 我们知道&#xff0c;数据库查询是数据库的最主要功能之一。我们都希望查询数据的速度能尽可能的快&#xff0c;因此数据库系统的设计者会从查询算法的角度进行优化。最基本的查询算法当然是顺序查找&#xff08;linear search&#xff09;&#xff0c;这种复杂度为…

C# FreeSql使用,基于Sqlite的DB Frist和Code First测试

文章目录 前言FreeSql 简单连接数据库服务不存在没装FreeSql.All装了FreeSql.All安装包选择 DBFirst安装命令行生成器生成Bat创建脚本 基于Sqlite的Code Frist文件夹自动导出到Debug目录Sqlite 数据库安装和创建Sqlite连接数据库自动增列增表测试增列删列改列名同名列改属性 Co…

【小黑嵌入式系统第十四课】μC/OS-III程序设计基础(三)——信号量(任务同步资源同步)、事件标记组(与或多个任务)

上一课&#xff1a; 【小黑嵌入式系统第十三课】PSoC 5LP第二个实验——中断控制实验 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能 文章目录 1 信号量1.1 简介1.2…

Generalized Focal Loss论文个人理解

论文地址&#xff1a;Generalized Focal Loss: Towards Efficient Representation Learning for Dense Object Detection 论文解决问题 研究人员最近更加关注边界框的表示(representation)及其定位质量估计&#xff08;LQE&#xff0c;本论文中指的是IoU score&#xff09;&a…

加速你的数据库:公司中SQL优化的八大绝招

前言 SQL优化这个问题也是老生常谈了&#xff0c;很多都还是在八股文中了解到&#xff0c;那么公司里的SQL都是咋优化的呢&#xff1f;和八股文一样吗&#xff1f;下面&#xff0c;我将与大家分享我在公司里学到的SQL优化知识。SQL优化是提高数据库性能和减少资源消耗的重要一环…

金融行业案例分享 | 升级业务保障,HyperBDR助力巴西海通银行容灾上华为云

巴西海通银行通过HyperBDR成功将业务从本地VMware容灾上华为云&#xff0c;实现分钟级RTO&#xff0c;保障业务连续性同时优化容灾TCO。 项目背景 海通银行由海通证券股份有限公司控股&#xff0c;是一家受欧盟监管的银行&#xff0c;在葡萄牙里斯本注册成立&#xff0c;业务遍…

mysql定时备份shell脚本和还原

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言数据库备份分类mysqldump命令备份计划1.每日备份&#xff0c;保留30天备份文件2.每月1号备份&#xff0c;保留12个月备份文件 定时调度还原总结 前言 数据库备…

QT第1天

题目&#xff1a;点击按钮改变文字 需要增加一个count属性&#xff0c;并且只需要定义槽&#xff0c;信号函数已经内置好了 //widget.h#ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Wi…