vue filters中时间戳转年月日并补零

wmklalala

于 2021-11-12 16:29:26 发布

阅读量873

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/wmklalala/article/details/121290810

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在Vue.js中，当过滤器`timeFormat`内部尝试调用辅助函数`timeAdd(m)`时遇到的问题。由于在filters中，`this`关键字并不指向Vue实例，导致无法直接调用组件方法。解决方案是将辅助函数移到Vue实例的方法中，通过`this.timeAdd(m)`进行调用。理解Vue的上下文和作用域对于正确使用过滤器和组件方法至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filters: {
    timeFormat(timestamp){
        var time = new Date(timestamp * 1000);
        var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
        var m = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
        var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
        function timeAdd(m){
            return m<10 ? '0'+m : m;
        };
        var timeStr = y + "-" + timeAdd(m) + "-" + timeAdd(d);
        return timeStr;
    }
}

timeFormat(timestamp) 和 timeAdd(m) 写在methods里时，用this.timeAdd(m)即可调用。但将timeFormat(timestamp)写在filters中时，filters中的this指向window而不是Vue实例，所以无法调用 timeAdd(m)。