Vue2.0 列表项 倒计时

test.gif

列表最后的效果如上，你们可以根据自己的需求稍微改改就OK了

 .items {
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            width: 100%;
            height: auto;
        }

<div id="container">
    <div class="items" v-for="(item,index) in list" :key="index" v-cloak>
        <mycounttime :endtime="item.countTime"></mycounttime>
        </div>
    </div>
</div>

<script type="text/javascript" src="../script/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../script/vue_debug.js"></script>
<script>
    var vm;
    $(function () {
        intiView();
    })

    function intiView() {
        Vue.component("mycounttime", {
            props: ['endtime'],
            template: '<span class="fontSize20">{{time}}</span>',
            data: function () {
                return {
                    time: "",
                    flag: false,
                }
            },
            mounted() {
                let self = this;
                let countTime = self.endtime;
                let time = setInterval(function () {
                    if (self.flag) {
                        clearInterval(time);
                    }
                    countTime = countTime - 1000;
                    self.timeDown(countTime);
                }, 1000)
            },
            methods: {
                timeDown(endTime) {
                    if (endTime <= 1000) {
                        console.log(endTime);
                        this.flag = true;
                    }

                    let hour = parseInt(endTime / 1000 / 3600);
                    let min = parseInt((endTime / 1000 - hour * 3600) / 60);
                    let sec = parseInt(endTime / 1000 - hour * 3600 - min * 60);
                    this.time = hour + ":" + min + ":" + sec;
                },
            },
        });
        vm = new Vue({
            el: "#container",
            data: {
                list: [{"countTime":1000 * 60 * 50},{"countTime":1000 * 60 * 40},{"countTime":1000 * 5}],
            },
            methods: {}
        });
    }
</script>

需求增加：如果倒计时的时间到了，那么就要隐藏某些界面如何实现呢？
html

.items {
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            width: 100%;
            height: auto;
        }

<div id="container">
    <div class="items" v-for="(item,index) in list" :key="index" v-cloak>
        <mycounttime :endtime="item.countTime"  :indexvalue="index"></mycounttime>
        <div v-show="item.showNormal" style="margin-left: 10">
            <button style="background: #0A9DCD; color: white" >
                确定按钮
            </button>
        </div>
    </div>
</div>

js

<script type="text/javascript" src="./script/vue_debug.js"></script>
<script type="text/javascript" src="./script/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
    var vm;
    $(function () {
        intiView();
    })

    function intiView() {
        Vue.component("mycounttime", {
            props: ['endtime','indexvalue'],
            template: '<span class="fontSize20">{{time}}</span>',
            data: function () {
                return {
                    time: "",
                    flag: false,
                }
            },
            mounted() {
                let self = this;
                let countTime = self.endtime;
                var indexvalue = self.indexvalue;
                let time = setInterval(function () {
                    if (self.flag) {
                        var item = vm.list[indexvalue];
                        item.showNormal = false;
                        Vue.set(vm.list, indexvalue, item);
                        clearInterval(time);
                    }
                    countTime = countTime - 1000;
                    self.timeDown(countTime);
                }, 1000)
            },
            methods: {
                timeDown(endTime) {
                    if (endTime <= 1000) {
                        this.flag = true;
                    }

                    let hour = parseInt(endTime / 1000 / 3600);
                    let min = parseInt((endTime / 1000 - hour * 3600) / 60);
                    let sec = parseInt(endTime / 1000 - hour * 3600 - min * 60);
                    this.time = hour + ":" + min + ":" + sec;
                },
            },
        });
        vm = new Vue({
            el: "#container",
            data: {
                list: [],
                showNormal:false,
            },
            methods: {}
        });

        var list=[];
        for (var i=0;i<3;i++){
            var item = new Object();
            item.showNormal = true;
            if (i==0){
                item.countTime = 1000 * 60 * 50;
            } else if (i==1){
                item.countTime = 1000 * 60 * 40;
            } else if (i==2){
                item.countTime = 1000  * 5;
            }
            list.push(item);
        }
        vm.list = vm.list.concat(list);

    }
</script>

效果图

GIF.gif