从后台得到的json数据中使用了unix格式的时间戳，前台使用vue展示的时候可以用过滤器对模板中的标签进行处理，很是方便，实现过程：

1.注册自定义过滤器

<script>//注册自定义过滤器Vue.filter('convTime', function(value) {var unixTimestamp = new Date(value * 1000);commonTime = unixTimestamp.toLocaleString('chinese',{hour12:false});   //转换为24小时制的时间格式return commonTime;})
</script>

2.在模板标签中使用

<h1>最后上报时间：{{status.lastShare | convTime}}</h1>

3.最终效果

4.附完整代码（用来查看我的XMR挖矿进度数据）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>XMR挖矿监控</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap-grid.min.css" rel="stylesheet"></head><body><div id="main" class="container"><div class="row"><div class="col-md-12"><h1>共提交哈希值：{{status.hashes}}</h1><h1>当前总速：{{status.hashrate}}</h1><h1>最后上报时间：{{status.lastShare | convTime}}</h1><h1>当前余额：{{status.balance}}</h1><table width=100% border=1><tr><td>矿机名称</td><td>哈希速度</td><td>已计算值</td><td>最后上报时间</td></tr><tr v-for="r in perWorker" style="height:2em"><td>{{r.workerId}}</td><td>{{r.hashrate}}</td><td>{{r.hashes}}</td><td>{{r.lastShare|convTime}}</td></tr></table></div></div></div></body><script>//注册自定义过滤器Vue.filter('convTime', function(value) {var unixTimestamp = new Date(value * 1000);commonTime = unixTimestamp.toLocaleString('chinese', {hour12: false});return commonTime;})$(document).ready(function() {$.getJSON("https://api-xmr.yspool.com/stats_address?address=46TEUwhbvqGY5wMzpdZ5q6b1zNdVGibrcdSyc1e2uTaJ2FTz2CpPy7UZNUiw7oy2gVZGB6U1CQCXg7yk4JcC4Z5yHfC45bY", function(result, status) {var v = new Vue({el: '#main',data: {status: result.stats,perWorker: result.perWorkerStats,charts: result.charts.hashrate}})});});</script></html>

Vue中使用自定义过滤器转换Unix时间戳相关推荐

vue 中格式化时间过滤器格式化时间
vue 中格式化时间过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s) ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
DEDECMS自定义表单unix时间戳转换成常规时间方法及增加表单添加时间方法
DEDECMS自定义表单提交的时间给转换成unix时间戳(一段数字),我们管理员在后台需要看到是日期,而不是那一行数字,下面方法可以解决这个问题,dedecms 5.6和5.7都可以,打开dede/t ...
C#中DateTime.Ticks属性及Unix时间戳转换
DateTime.Ticks:表示0001 年 1 月 1 日午夜 12:00:00 以来所经历的 100 纳秒数,即Ticks的属性为100纳秒(1Ticks = 0.0001毫秒). Unix时间 ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
php utc时间_PHP转换UNIX时间戳 UTC时间(TZ格式) 标准时间的方法 UNIX UTC GMT时间、本地时间互转...
在PHP编程中经常会遇到各种不同格式的时间比如: unix时间戳:1547740800 UTC时间:2019-1-18T00:00:00Z 标准时间:2019-1-18 00:00:00 以上这三个 ...
java 转换unix时间戳,Java与Unix时间戳的相互转换详解
Java将Unix时间戳转换成指定格式日期,供大家参考,具体内容如下当从服务器获取数据的时候,有时候获取的数据中的时间在很多的情况下是时间戳类似于这样1473048265,当然,我们不可能将这些数据 ...
php时间戳转utc时间格式,PHP转换UNIX时间戳 UTC时间(TZ格式) 标准时间的方法 UNIX UTC GMT时间、本地时间互转...
在PHP编程中经常会遇到各种不同格式的时间比如: unix时间戳:1547740800 UTC时间:2019-1-18T00:00:00Z 标准时间:2019-1-18 00:00:00 以上这三个 ...

Vue中使用自定义过滤器转换Unix时间戳

1.注册自定义过滤器

3.最终效果

4.附完整代码（用来查看我的XMR挖矿进度数据）

Vue中使用自定义过滤器转换Unix时间戳相关推荐

最新文章

热门文章