Vue -- filters 过滤器、倒计时效果

局部过滤器

时间、***号

<div id="wrapper" class="wrapper" style="display: none;">
    距离活动结束还剩:<p v-html="times"></p>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script src="qs.min.js"></script>
var mainVM = new Vue({
        el: '#wrapper',
        data: {
             initActiveMsgObj:{}, // 接收接口返回的数据
             timer: null, // 计时器
             times: '<span>0</span>天<span>00</span>时<span>0</span>分', // 倒计时到分钟，比真正的秒还差60秒，需要赋值的时候加进去，如果是到秒，就不需要了
             countDown: 0
        },
        filters: {
              formatNumber(value){ // 格式化金额
                    var nStr = value;
                    if(!nStr){return nStr;}
                    nStr += '';  
                    x = nStr.split('.');  
                    x1 = x[0];
                    if(!x[1]){
                        x[1] = '00';
                    }  
                    x2 = x.length > 1 ? '.' + x[1] : '';
                    var rgx = /(d+)(d{3})/;  
                    while (rgx.test(x1)) {  
                        x1 = x1.replace(rgx, '$1' + ',' + '$2');  
                    }  
                    return x1 + x2;  
            },  
            formatDate(timestamp) {
                if (!timestamp) return;
                var date = new Date(timestamp * 1000);
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
                return M + "." + D;
            },
            formatDateChina(timestamp) {
                if (!timestamp) return;
                var date = new Date(timestamp * 1000);
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
                return M + "月" + D + "日";
            },
        },
        mounted() {
            document.getElementById('wrapper').style.display = 'block';
        },
        created() {
            this.getDetail();
        },
        methods: {
            getDetail(){ // 初始化数据
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    method: 'post',
                    dataType: "json",
                    data: Qs.stringify({
                        tid: this.GetQueryString('tid'), // 从url上获取id
                    }),
                   url: url,
                }).then(function (res) {
                    if(res.data && res.data.result){
                        res = res.data
                        if(res.status == 200){
                            mainVM.initActiveMsgObj = res.result;
                                    mainVM.countDown = Number(res.result.end_time) + 60;  // 这里如果是时间到分钟，需要增加一个60s，这样防止，到00还需要等一分钟才结束活动，如果显示到秒就不需要了次变量了。
                                    mainVM.timeDown();  
                        }else{
                        }
                    }
                }).catch(function(error){

                })
            },
            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            timeDown() {  // 倒计时
                clearInterval(this.timer);
                var starttime = this.initActiveMsgObj.start_time;
                var nowDate = Math.round(new Date() / 1000); // 当前时间
                //var endtime = Number(this.initActiveMsgObj.end_time); 
                var endtime = this.countDown;
                // endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
                if(endtime < nowDate){return}
                var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
                //天数
                var days = Math.floor(totalSeconds / (60 * 60 * 24));
                //取模（余数）
                var modulo = totalSeconds % (60 * 60 * 24);
                //小时数
                var hours = Math.floor(modulo / (60 * 60));
                hours = hours < 10 ? ('0' + hours) : hours;
                modulo = modulo % (60 * 60);
                //分钟
                var minutes = Math.floor(modulo / 60);
                minutes = minutes < 10 ? '0' + minutes : minutes;
                // console.log(minutes)
                //秒
                // var seconds = modulo % 60;
                // seconds = ('0' + t.seconds).slice(-2);
                // console.log(seconds);
                //输出到页面
                this.times = '<span>'+ days +'</span>天<span>'+ hours +'</span>时<span>'+ minutes +'</span>分';
                // console.log(days + "天" + hours + "时" + minutes + "分");
                //if(totalSeconds <= 0){
                if(totalSeconds <= 60){
                    clearInterval(this.timer);
                    window.location.reload()
                }else{
                    this.timer = setInterval(this.timeDown, 1000);
                }
            },
        }
    })

注意：JavaScript日期和时间是从用户的计算机上获取的，这意味着用户可以通过更改计算机上的时间来影响JavaScript时钟。在大多数情况下，这并不重要，但在一些超级敏感的情况下，就需要从服务器上获取时间。可以使用Ajax来完成。