使用Vue js显示日期是否在另一个日期之前或之后的元素

问题描述

我正在使用vue在页面上动态显示元素（称为框），但是我需要根据其开始日期是在今天+ 1周之前还是之后显示元素。

因此，如果Box.start_date位于今天的一个星期之前，则显示它，否则将其隐藏。

我不确定如何在vue中做到这一点

即。

<div class="Box" v-if="Box.start_date < *** 1 week from Now date here?? ***"> ...  </div>

我尝试使用moment.js，但它给我一个错误，提示在vue中未定义moment

有了laravel和blade，我会像这样...

@if($Box->start_date > Now()->addWeek(1))

我该如何使用vue？

解决方法

尝试使用计算属性返回该值：

computed:{
   beforeWeek(){
   return (new Date().getTime())-(new Date(this.box.start_date).getTime())> (7*24*60*60*1000)
   }
}

模板：

<div class="box" v-if="beforeWeek"> ...  </div>

或者您可以使用一种方法：

methods:{
beforeWeek(start_date){
   return (new Date().getTime())-(new Date(start_date).getTime())> (7*24*60*60*1000)
   }
}

模板：

<div class="box" v-if="beforeWeek(box.start_date)"> .... </div>

**注意：**

7 24 60 60 1000 是一周中的毫秒数

,

使用一种方法找出了适合我的解决方案

<div class="box" v-if="skippableDate(box.start_date)"> .... </div>

在我的js中

methods: {
        skippableDate(date){
            var now = new Date();
            var skippableDate = now.setDate(now.getDate() + (4+(7-now.getDay())) % 7) // this is getting next thursday (update 4 to the number of the day of the week you want)
            var parseDate = Date.parse(date);

            if(parseDate > skippableDate){
                return true
            }else{
                return false
            }
        },},