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

  • 相关阅读:
    go 错误处理策略
    git merge
    oracle
    使用PHPExcel导入数据库,date数据的问题
    PhpWord使用
    ThinkPHP
    Memcache
    没用过docker就out了
    TCP三次挥手四次协议
    数据分析
  • 原文地址:https://www.cnblogs.com/yan0802/p/vue.html
Copyright © 2011-2022 走看看