我用momentjs。
在我的Vuujs代码中,我想从现在开始到过去的那个时间点。在我的模板中,我合并了这一小段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>
最佳答案
好吧,不能直接在模板中使用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>
关于vue.js - MomentJS + VueJS:从现在到过去的某个相对时间,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44304636/