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

  • 相关阅读:
    Live Writer配置
    protobufnet 学习手记
    好的Sql语句也能提高效率(二)
    关于CodeSmith的输出问题
    [Scrum]12.29
    [scrum] 1.4
    分享 关于c#注释的规范
    [Scrum] 1.3
    分享:将XML(VS提取注释时生成)转换为Chm的一个方法
    【Scrum】2010.12.27
  • 原文地址:https://www.cnblogs.com/yan0802/p/vue.html
Copyright © 2011-2022 走看看