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

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

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


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


相关文章
|
1天前
|
JavaScript 前端开发 API
|
1天前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
19小时前
|
JavaScript
|
19小时前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
19小时前
|
JavaScript
|
19小时前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
20小时前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
|
1天前
|
JavaScript
|
1天前
|
JavaScript 前端开发
|
1天前
|
JavaScript 前端开发 网络架构
技术笔记:vue——介绍和使用
技术笔记:vue——介绍和使用