vue2.0实现倒计时15分钟
<template> <div> <p>{{minute}}:{{second}}</p> </div> </template> <script type="text/ecmascript-6"> export default { data () { return { goodsObj: [ { name: '大胖的店', checked: false, list: [ { name: '麻辣二胖', price: 23.00, realStock: 10, fare: 1.5, num: 1, checked: false }, { name: '香辣二胖', price: 21.00, realStock: 2, fare: 1.5, num: 2, checked: false }, { name: '红烧二胖', price: 88.00, realStock: 8, fare: 1.5, num: 4, checked: false } ] } ], minutes: 15, seconds: 0 } }, mounted () { this.add() }, methods: { num: function (n) { return n < 10 ? '0' + n : '' + n }, add: function () { var _this = this var time = window.setInterval(function () { if (_this.seconds === 0 && _this.minutes !== 0) { _this.seconds = 59 _this.minutes -= 1 } else if (_this.minutes === 0 && _this.seconds === 0) { _this.seconds = 0 window.clearInterval(time) } else { _this.seconds -= 1 } }, 1000) } }, watch: { second: { handler (newVal) { this.num(newVal) } }, minute: { handler (newVal) { this.num(newVal) } } }, computed: { second: function () { return this.num(this.seconds) }, minute: function () { return this.num(this.minutes) } } } </script> <style></style>
在利用vue2.0制作项目的时候,遇到了支付前倒计时16分钟,找了狠多示例,都无果。这是最后的版本,记录一下 方便以后使用和给正在vue路上的朋友相互学习。。。