在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue 怎樣重新初始化組件參數值

vue 怎樣重新初始化組件參數值

做的一個倒計時組件,當倒計時結束時怎樣重新開始下一輪倒計時,頁面上有多個此組件,傳的參數是一個剩余時間的秒數leftTime
圖片描述

頁面調用:

<!-- 倒計時組件 -->
<timer v-bind:code="hi.code" v-bind:left-time="hi.leftTime" v-bind:id="'timer' + hi.code"></timer>

Vue.component('timer', {
    template: '<div class="timer_wrap" data-name="time" v-html="countDown"></div>',
    data(){
            return{ count: '' }
    },
    props: ['leftTime', 'code'],
    created() {
        this.count = this.leftTime;
    },
    computed: {
        countDown: {
            get: function(){
                let self = this;
                let time = self.count;

                let content = '<ol class="s"><span class="sp1">{1}</span><span class="sp2">{2}</span></ol>\
                            <ol class="f"><span class="sp1">{3}</span><span class="sp2">{4}</span></ol>\
                            <ol class="m"><span class="sp1">{5}</span><span class="sp2">{6}</span></ol>';

                if(time <= 0) {
                    // TODO 進入下一輪倒計時
                    this.refreshTime(this.code);
                    return this.fmt(content, 0, 0, 0, 0, 0, 0)
                }

                let hour = Math.floor(time / 60 / 60);
                let hour1 = Math.floor(hour / 10);
                let hour2 = Math.floor(hour % 10);

                let mn = time - hour * 60 * 60;
                let minute = Math.floor(mn / 60);
                let minute1 = Math.floor(minute / 10);
                let minute2 = Math.floor(minute % 10);

                let second = mn - minute * 60;
                let second1 = Math.floor(second / 10);
                let second2 = Math.floor(second % 10);

                return this.fmt(content, hour1, hour2, minute1, minute2, second1, second2)
            },
            set: function(){
            }
        }
    },
    mounted(){
        this.start()
    },
    methods: {
        fmt(c) {
            for (let i = 1; i < arguments.length; i++) {
                c = c.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
            }
            return c;
        },
        start() {
            let self = this;
            let timer = setInterval(function() {
                self.count--;
                if(self.count <= 0){
                    clearInterval(timer);
                }
            }, 1000);
        },
        refreshTime(code) {
            let self = this;
            Box.ajax({code: code}, Route.Hall.GET_DATA, function (data) {
                new Vue({
                    el: '#_' + code,
                    data: data,
                    mounted() {
                        
                    },
                    computed: {
                        
                    }
                })
            })
        }
    }
});
回答
編輯回答
初心

既然是v-bind綁定 直接更改綁定的值不就可以了么?

2017年1月7日 17:48
編輯回答
凝雅

首先感謝Black_晨同學的回答,目前我采用另一種方式可以讓循環(huán)繼續(xù),但是另一個問題就是繼續(xù)后的值不會更新到UI上,移步:https://segmentfault.com/q/10...

2017年7月30日 21:52