Vue.js中如何基于日期对应的星期实现条件CSS样式绑定

实现方案 #

步骤1：新增获取星期对应类名的方法 #

在methods中新增方法，通过Date.getDay()获取日期对应的星期数值（返回值范围0=周日，1=周一，...，6=周六），返回对应类名：

methods: {
  // 原有方法保留不变
  load() {
    // 原有逻辑不变
  },
  formatDate(inStr) {
    // 原有逻辑不变
  },
  // 新增星期类名获取方法
  getWeekdayClass(inStr) {
    const d = new Date(inStr)
    const weekday = d.getDay()
    return `weekday-${weekday}`
  }
}

步骤2：模板中动态绑定CSS类 #

修改需要添加样式的div，用Vue的:class语法绑定动态类，原有静态类可按需保留：

<!-- 原有<div class="card blue-grey darken-1" >替换为下方代码 -->
<div 
  class="card" 
  :class="[getWeekdayClass(e.DeliveryDate), 'blue-grey darken-1']"
>
  当前日期   {{ formatDate(e.DeliveryDate) }}h
</div>

如果需要自定义的星期样式覆盖原有背景色，把blue-grey darken-1从类数组中移除即可。

步骤3：编写对应星期的CSS样式 #

在<style>块中定义每天对应的样式即可，示例如下：

/* 周日 */
.weekday-0 {
  background-color: #ef5350 !important;
  color: #fff;
}
/* 周一 */
.weekday-1 {
  background-color: #42a5f5 !important;
  color: #fff;
}
/* 周二到周六按相同规则定义，数值对应2-6即可 */
.weekday-2 {
  background-color: #66bb6a !important;
}
.weekday-3 {
  background-color: #ffa726 !important;
}
.weekday-4 {
  background-color: #ab47bc !important;
}
.weekday-5 {
  background-color: #ff7043 !important;
}
/* 周六 */
.weekday-6 {
  background-color: #9ccc65 !important;
}

可选适配方案 #

如果需要匹配德语的星期名称做类名，适配你现有德语日期格式化的逻辑，可以修改getWeekdayClass方法为：

getWeekdayClass(inStr) {
  const d = new Date(inStr)
  const weekdayName = d.toLocaleDateString("de-DE", {weekday: "long"})
  return `weekday-${weekdayName.toLowerCase()}`
}

该写法生成的类名会是weekday-montag、weekday-dienstag这类德语星期名称，更便于维护。

内容的提问来源于stack exchange，提问作者Michael Pietzsch