Vue.js -- 解决表单元素使用v-modal双向绑定时间戳改日期格式

本文链接：https://blog.csdn.net/weixin_43636289/article/details/90371321

问题分析:新版本的vue当我们用v-modal双向绑定时会发现date类型的数据传出的是一个时间戳,也用不了过滤器,只能定义计算规则去得出正确的时间格式.

1.先建立一个格式化时间的date.js文件:

var dateFormat = {
    padLeftZero: function (str) {
        return ('00' + str).substr(str.length)
    },
    formatDate: function (date, fmt) {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + ''
                fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
            }
        }
        return fmt
    }
}

2.在vue代码中设置计算规则:

var vm = new Vue({
	el: '',
	data: {
		user: {
			u_birthday:''
		}
	},
	methods: {
		//这里可以去后端调用方法查出u_birthday并且替换掉绑定的值
	},
	computed: {
        birthday: {		//注意,这里设置的计算规则的命名是页面v-modal绑定的值
            get: function () {      //双向--获取到页面
                let date = new Date(this.user.u_birthday);//传入需要格式化的值,跟data里的值对应
                return dateFormat.formatDate(date, "yyyy-MM-dd");//调用刚刚写好的js代码格式化
            },
            set: function () {      //双向--获取到后端
                
            }
        }
    }
});