Vuejs如何输出整个星期的日期(格式示例:2020年5月4日至10日)和工作日(Monday......Sunday)

Question

目前，我正试图输出一个日期和工作日的信件。下面的第一个图片是它现在输出的v-for循环。

​

​

​

 <div v-for="(country, index) in info" :key="index"> 
  <template v-if="index == 0">
     {{ country.datetime }}
  </template>
  <template v-else>
    {{ country.datetime ||  moment("dddd") }}
  </template>
  {{ Math.floor((country.min_temp + country.max_temp) / 2) }}
</div>

​

实际上，我试图实现的是具有正确日期格式的以下输出。第一个温度是星期一到星期天的平均温度。但是想要实现这样的日期格式

2020年5月4-10日(整周)

然后，低于它应该只输出平日本身(星期一-星期日)。我该怎么解决这个问题。如果你知道一个更好的解决方案，那么不要犹豫，在这里分享它。

​

​

Answer 1

我已经创建了两个不同的方法，一个已经显示在上面，但是输出了整个星期的检查下面。

​

 <div v-for="(country, index) in info" :key="index"> 
  <template v-if="index == 0">
     {{ weekDate(country.datetime) }}
  </template>
  <template v-else>
    {{ dayFullName(country.datetime) }}
  </template>
  {{ Math.floor((country.min_temp + country.max_temp) / 2) }}
</div>    
    
methods: {
  weekDate (value) {
    const entireWeek = moment(value).format("MMMM D -") + moment(value).add(7, 'days').format("D YYYY") 
    return entireWeek; // July 6 - 13 2020
  },
  dayFullName (date) {
    const getFullName = moment(date).format('dddd');
    return getFullName // Monday, Tuesday etcetera
  }
}

​

Answer 2

你只需用头7天(并确保你从星期一开始)计算平均温度，然后用下面的方法来形成它

const date = moment();
var FormatedDate = date.format('MMM D - ') + date.add(7, 'days').format('D YYYY');
console.log(FormatedDate);

实际上，对于那些不需要任何格式的日子来说，纯HTML就足够了，因为数组中的第一个元素是周一，并且有当天的温度。希望我能理解你的话