vue3定时器

简介: vue3定时器

vue3没有this,取而代之的是proxy

所以在定时器的写法上也有所不同

话不多说直接上代码

<template>
 <p>剩余时间:{{ count }}</p>
</template>
export default{
const seconds = ref(1800);//定义一下秒数,根据秒数来计算,需要自己判断
const countDown = () => {
      let d = parseInt(seconds.value / (24 * 60 * 60));
      d = d < 10 ? "0" + d : d;
      let h = parseInt((seconds.value / (60 * 60)) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((seconds.value / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(seconds.value % 60);
      s = s < 10 ? "0" + s : s;
      count.value = m + "分" + s + "秒";
      // console.log('监听',count.value );
    };
//
const timed = () => {
      dsq.value = setInterval(() => {
        seconds.value -= 1;
        countDown();
      }, 1000);
    };
}

这样下来,一个倒计时30分钟的定时器就写好了

相关文章
|
2天前
|
存储 JavaScript 开发者
Vue 3 组件通信方式总结
Vue 3 组件通信方式总结
|
2天前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
|
2天前
|
存储 JavaScript
Vue 3 组件通信方式
Vue 3 组件通信方式
|
1天前
|
JavaScript 前端开发 API
vue3的传送门teleport究竟有多神奇?suspense发起异步请求有多简约?
该文章介绍了Vue3中新特性Teleport和Suspense的使用方法,演示了如何使用Teleport进行DOM节点的非父子关系传送,以及Suspense在处理异步组件加载时的优雅展示和错误处理技巧。
|
1天前
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
1天前
|
缓存 JavaScript 算法
卷不动也得继续学!紧跟vue3的步伐,再来get一波进阶新特性!
该文章深入讲解了Vue3的进阶新特性,包括`watchEffect`的使用、性能优化策略、Vite构建工具的优势以及全局API的变化等内容,帮助开发者更好地掌握Vue3的开发技巧。
卷不动也得继续学!紧跟vue3的步伐,再来get一波进阶新特性!
|
1天前
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
该文章对比了Vue2与Vue3在响应式原理上的不同,重点介绍了Vue3如何利用Proxy替代Object.defineProperty来实现更高效的数据响应机制,并探讨了这种方式带来的优势与挑战。
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
|
1天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
1天前
|
JavaScript API
模块化妙用!用vue3实现一个鼠标追踪器和异步加载组件
该文章展示了如何使用Vue3的Composition API实现鼠标追踪器功能,并介绍了创建异步加载组件的方法,利用TS泛型增强了组件的灵活性与可维护性。
|
1天前
|
JavaScript API
卷死了!再不学vue3就没有人要你了!速来围观vue3新特性
该文章强调了学习Vue3的重要性,并详细介绍了Vue3相较于Vue2的新特性与改进,包括Composition API、响应式系统的变化以及其他API的更新等内容。