Vue中的filter过滤器

2019-01-29

Vue中的filter过滤器的使用

过滤器的使用方式

1
2
3

<span>
    {{date | dateNoWeek}}
</span>

示例代码

main.js全局引用

import filter from './util/filter';
//全局过滤器
for(var key in filter){
    Vue.filter(key,filter[key]);
}

filter.js

export default {
    date(v){
        var week_  = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        var date=new Date(v);
        var week=date.getDay()-1;
        if(week == -1) {
            week = 6
        }
        return `
       ${date.getFullYear()}年
       ${(date.getMonth()+1).toString().padStart(2,"0")}月
       ${(date.getDate()).toString().padStart(2,"0")}日
       ${week_[week]}
       ${(date.getHours()).toString().padStart(2,"0")}:
       ${(date.getMinutes()).toString().padStart(2,"0")}:
       ${(date.getSeconds()).toString().padStart(2,"0")}
      `
    },
    time(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = (date.getMonth()+1).toString().padStart(2,"0");
        let day    = date.getDate().toString().padStart(2,"0");
        let hour   = date.getHours().toString().padStart(2,"0");
        let minute = date.getMinutes().toString().padStart(2,"0");
        let second = date.getSeconds().toString().padStart(2,"0");
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
    },
    dateNoWeek:function(v){
        var date=new Date(v);
        return `
           ${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,"0")}-${(date.getDate()).toString().padStart(2,"0")}
           ${(date.getHours()).toString().padStart(2,"0")}:
           ${(date.getMinutes()).toString().padStart(2,"0")}:
           ${(date.getSeconds()).toString().padStart(2,"0")}
    `}
}