vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
类别:编程学习 浏览量:979
时间:2022-03-28 09:20:15 vue 计算一段时间的月份和天数
vue实现指定日期之间的倒计时本文实例为大家分享了vue实现指定日期之间倒计时的具体代码,供大家参考,具体内容如下
效果图如下
此处使用moment.js日期处理类库 使用方法如下
npm install moment 或者 yarn add moment
html
<li class="time-down"> <li class="back">{{dayNum}}</li> <li class="font-14 date">天</li> <li class="back">{{hourNum}}</li> <li class="font-14 date">时</li> <li class="back">{{minuteNum}}</li> <li class="font-14 date">分</li> <li class="back">{{secondNum}}</li> <li class="font-14 date">秒</li> </li>
js
import moment from 'moment'; export default { name: 'TimeRangPage', props: { startTime: String, endTime: String }, data () { return { days: 0, hours: 0, minutes: 0, seconds: 0, timeSetInterval: null, showTimeDown: false, showOver: false }; }, created () { if (moment(new Date()).isBefore(this.startTime)) { this.showTimeDown = true; this.timeDown(); } if (moment(new Date()).isAfter(this.endTime)) this.showOver = true; }, methods: { timeDown () { this.timeSetInterval = setInterval(() => { if (moment(this.startTime).isBefore(moment())) { this.showTimeDown = false; clearInterval(this.timeSetInterval); location.reload(); } let dur = moment.duration(moment(this.startTime) - moment(), 'ms'); this.days = dur.get('days'); this.hours = dur.get('hours'); this.minutes = dur.get('minutes'); this.seconds = dur.get('seconds'); }, 1000); } }, computed: { dayNum () { if (this.days < 10) return '0' + this.days; return this.days; }, hourNum () { if (this.hours < 10) return '0' + this.hours; return this.hours; }, minuteNum () { if (this.minutes < 10) return '0' + this.minutes; return this.minutes; }, secondNum () { if (this.seconds < 10) return '0' + this.seconds; return this.seconds; } } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vueweb端聊天(Vue实现聊天界面)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
热门推荐
- docker容器设置端口(Docker 实现容器端口绑定本地端口)
- css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
- css里margin是什么意思(正确理解CSS中的margin合并的用法)
- css三种布局模式(CSS实现等分布局的4种方式)
- javascript如何建立一个静态变量(JavaScript中子函数访问外部变量的3种解决方法)
- php实现redis消息队列(redis+php实现微博三微博列表功能详解)
- 宝塔面板进不去(宝塔面板打不开重启也不行的处理方法)
- sqlserver 使用SSMS运行sql脚本的六种方法(sqlserver 使用SSMS运行sql脚本的六种方法)
- 自己怎么选网站服务器(网站空间服务器的正确选择方法)
- virtualbox服务器搭建centos(VirtualBox安装CentOS及JDK、Hadoop的安装与配置详细教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9