本文实例为大家分享了vue+moment实现倒计时的具体代码,供大家参考,具体内容如下
示例
代码
<!-- 使用计算属性,传入截止日期 --> <span>{{countdown(enddate)}}</span>
/*引入日期插件*/ import moment from 'moment' export default { data() { return { now: moment(), enddate: '2019-05-07 08:20:00', } }, mounted() { //定时更新当前时间 setinterval(()=>{ this.now = moment() },1000), //数字前补 0 // num传入的数字,n需要的字符长度 prefixinteger(num, n) { return (array(n).join(0) + num).slice(-n); } }, computed: { //计算属性,返回剩余时间 countdown(){ return function(enddate) { let m1 = this.now let m2 = moment(enddate) var du = moment.duration(m2 - m1, 'ms'), hours = du.get('hours'), mins = du.get('minutes'), ss = du.get('seconds'); if(hours<=0 && mins<=0 && ss<=0) { return "已超时" }else { return this.prefixinteger(hours,2) + ':' + this.prefixinteger(mins,2) + ':' + this.prefixinteger(ss,2) } } } }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
vue源码实战render.js与$nextTick的异步调用
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
网友评论