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路上的朋友相互學習。。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM