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

  • 相关阅读:
    机器学习——逻辑回归(Logistic Regression)
    [BUUCTF]PWN4——pwn1_sctf_2016
    [BUUCTF]PWN1——test_your_nc
    [BUUCTF]PWN2——rip
    vuex状态管理详细使用方法
    微信小程序入门
    条件渲染vue
    vue-cli安装方法
    JavaScript逻辑运算符
    JavaScript的基本介绍
  • 原文地址:https://www.cnblogs.com/yan0802/p/vue.html
Copyright © 2011-2022 走看看