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

最新推荐文章于 2022-05-17 19:57:17 发布

DexterLien

最新推荐文章于 2022-05-17 19:57:17 发布

阅读量1.8k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/lpwmm/article/details/80216414

版权

前端开发专栏收录该内容

42 篇文章 1 订阅

订阅专栏

从后台得到的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>