vue时间转换,vue 格式化时间
本文主要介绍了vue中时间格式的转换，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue时间格式转换问题1。效果图2。要求：所有前端显示的vue转换时间格式(适用于Uni-App)1。前端实时采集2。使用过滤器。
vue时间格式转化问题
1.效果图
2.需求：前台展示一律用的时间规格
YY-MM-DD HH: MM: SS，也就是说，月份和日期中不足两位数的每时每分每秒都要加0，使其作为一个整体出现。所以下面是月、日、分、秒小于10时加零的处理。其实10点直接判断月、日、分直接拼接零的想法被我同事打断了。这个方法太繁琐了。于是我找到了下面这个简洁的方法，据说是es6中的函数用法。我还没查来源。先说说吧。接下来，分析代码。
你可以单独用js写，这样就可以用公共方法写，大家都可以调用的那种，当然也可以用你需要的方法写，根据你的实际情况。
写在公共方法里
可以在tools文件夹下创建一个新的data.js，如下所示：
代码部门：
Vue.prototype将formatDate方法设置为全局方法，以便可以调用它。请注意，方法名是formatDate，后跟
/**
*由syp于2020/5/15创建。
*/
exports.install=function (Vue，选项){
vue . prototype . format date=function(row，column) {
让data=row[column.property]
if (data==null) {
返回null
}
让dt=新日期(数据)
设yyyy=dt.getFullYear()
设MM=(dt.getMonth() 1)。toString()。padStart(2，“0”)
设dd=dt.getDate()。toString()。padStart(2，“0”)
设h=dt.getHours()。toString()。padStart(2，“0”)
设m=dt.getMinutes()。toString()。padStart(2，“0”)
让s=dt.getSeconds()。toString()。padStart(2，“0”)
返回yyyy - MM - dd h : m : s
}
}
处理完data.js后，在public js中调用，并设置为global，这样每个人都可以使用。
然后调用vue页面上的图表：
:formatter=formatDate
FormatDate是设置为全局方法的方法名。
将它只是变为局部的格式化时间调用，那么就需要把格式化时间的代码放在调用页面的方法中
这个方法只需要放在这个页面上的方法下面。
formatDate(行，列){
让data=row[column.property]
if (data==null) {
返回null
}
让dt=新日期(数据)
return dt . get full year()-(dt . get month()1)- dt . getdate() dt . get hours(): dt . get minutes(): dt . get seconds()
},
在熟悉的列表显示中使用，如上：formatter=formatDate 就可以了。
插图：
vue转换时间格式(适用于uni-app)
1.前端获取实时时间
模板
view class=content
查看{ { date } }/查看
/查看
/模板
脚本
导出默认值{
data() {
返回{
日期：新日期()
}
},
onLoad() {}，
已安装：函数(){
让那个=这个
//setInterval()方法可以根据指定的周期(以毫秒为单位)调用函数或计算表达式
//每毫秒调用一次
that . timer=setInterval(function(){
that . Date=new Date()；
}, 1000)
},
销毁前：函数(){
if (this.timer) {
clearInterval(this.timer)
}
},
方法：{
}
}
/脚本
获取国际标准时间
2. 运用过滤器
通过向Vue实例添加选项过滤器来设置它，并格式化时间。
模板
view class=content
查看{ { date format date } }/查看
/查看
/模板
脚本
//首先，时间转换的关键
var padDate=函数(值){
返回值10？“0”值：值；
};
导出默认值{
//第二，时间转换的关键
过滤器：{
formatDate:函数(值){
var date=新日期(值)；
var year=date . getfullyear()；
var month=padDate(date . get month()1)；
var day=padDate(date . getdate())；
var hours=padDate(date . get hours())；
var minutes=padDate(date . get minutes())；
var seconds=padDate(date . get seconds())；
返回年-月-日 小时:分:秒
}
},
data() {
返回{
日期：新日期()
}
},
onLoad() {}，
已安装：函数(){
让那个=这个
//setInterval()方法可按照指定的周期（以毫秒计)来调用函数或计算表达式
//每一毫秒调用一次
那个。timer=setInterval(function(){
那个。Date=new Date()；
}, 1000)
},
销毁前：函数(){
if (this.timer) {
clearInterval(this.timer)
}
},
方法：{
}
}
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。