MomentJS + VueJS：获取从现在到过去某个时间点的相对时间

Question

我使用 MomentJS。

在我的 VueJS 代码中，我想获得从现在到过去那个点的相对时间。在我的模板中，我合并了这段 JavaScript 的结果：

<template>
  <div>{{ moment(message.createdAt, 'YYYYMMDD').fromNow() }}</div>
</template>

对象接收日期如下：

message: { createdAt: Date.now() }

结果总是：a few seconds ago...

我怎样才能得到正确的结果（并不总是“几秒钟前”）：

编辑：

这是我的完整模板：

<template v-for="message in messages">
  <div class="message">
    <div class="text">{{ message.text }}</div>
    <div class="date">{{ moment(message.createdAt).format('D.M.YYYY') }}</div>
    <div class="date">{{ moment(message.createdAt).fromNow() }}</div>
  </div>
</template>

Answer 1

好吧，您不能直接在模板中使用 moment，因为它不是白盒的（无法在模板中访问）。

模板表达式是沙盒化的，只能访问全局变量的白名单，例如 Math 和 Date。您不应尝试在模板表达式中访问用户定义的全局变量。

来源：https : //vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

我建议你改用一些过滤器（你也可以用非常相似的方法来做到这一点）。

这是一个工作示例。

new Vue({
	el: "#app",
	data() {
		return {
			messages: [
				{
					text: 'Message1',
					createdAt: new Date() // Now
				},
				{
					text: 'Message2',
					createdAt: new Date(2016, 3, 1) // 1 April 2017
				}
			],
			interval: null
		};
	},
	filters: {
		format(date) {
			return moment(date).format('D.M.YYYY')
		},
		fromNow(date) {
			return moment(date).fromNow();
		}
	},
	created() {
		this.interval = setInterval(() => this.$forceUpdate(), 1000);
        // Trigger an update at least each second
        // You should probably raise this duration as refreshing so often
        // may be not useful 
 		},
	beforeDestroy() {
		clearInterval(this.interval);
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<div id="app">

	<template v-for="message in messages">
	  <div class="message">
		<div class="text">{{ message.text }}</div>
		<div class="date">{{ message.createdAt | format }}</div>
		<div class="date">{{ message.createdAt | fromNow }}</div>
	  </div>
	</template>
	
</div>