【Vue】实现出生日期计算年龄

深碍√TFBOYSˉ_ 2024-04-03 08:24 49阅读 0赞

数据库只有出生日期 而我们需要再页面展示年龄

![526f908beac24bb3880445d36faaf920.png][]

使用Vue的过滤器 对日期进行一个过滤

filters: {
            showAge(value) {
            // 指定日期
            let birthdays = new Date(value.replace(/-/g, "/"))
            // 当前系统日期
            let d = new Date();
            let age = d.getFullYear() - birthdays.getFullYear() -  (d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() && d.getDate() < birthdays.getDate()) ? 1 : 0);
            return age
            }
        },

![e40da0bcda364896b358386882336d27.png][]

变成了NaN 原因： 服务器到前端 没有进行一个日期格式话转换

![99de29c2c3b44a089799706fe07e8a94.png][] 使用DateTimeformat和@JsonFormat来解决

**注解@JsonFormat主要是后台到前台的时间格式的转换**

**注解@DataFormat主要是前台到后台的时间格式的转换**

![d44b8a5436f04cefb792b0e90906fb64.png][]

![19040503b13941948497a2c4d372050a.png][]

[526f908beac24bb3880445d36faaf920.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e7788ac4aadd40b29d12eee51811401e.png
[e40da0bcda364896b358386882336d27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9b53d57a64e7414b958c10abdd587c46.png
[99de29c2c3b44a089799706fe07e8a94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a439afc6b8f5415bbfac68778b92c0a7.png
[d44b8a5436f04cefb792b0e90906fb64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0b850a033df446c498ef92cf514d08fe.png
[19040503b13941948497a2c4d372050a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/208626a5d9a24ad7864e82425ef4a33c.png