zoukankan      html  css  js  c++  java
  • 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路上的朋友相互学习。。。

  • 相关阅读:
    vue-router的push和replace的区别
    ajax请求常见状态码以及产生的原因
    vue定义data的三种方式与区别
    button与input button区别
    变量的声明方式
    js变量
    JavaScript的节流与防抖?
    js实现继承的方法-构造函数
    前端表单验证常用的15个JS正则表达式
    ES6中的新增数组的方法
  • 原文地址:https://www.cnblogs.com/yan0802/p/vue.html
Copyright © 2011-2022 走看看