Vue JS 上基于日期的条件 CSS答案

【问题标题】：Conditional CSS on Vue JS based on DateVue JS 上基于日期的条件 CSS
【发布时间】：2021-10-06 20:53:25
【问题描述】：

任务是：为一周中的每一天使用特定的 CSS 样式。

我们有什么从下面传入的 json 对象生成的几个 DIV

    <template>
      <div class="row">
        <div v-for="(e, i) in inventory"
          :key="e.PreorderID + e.ArticleNumber" >
        <div class="col s2 m3" v-if="e.Hidden == false" >
 <!--  The following DIV should be getting a specific CSS class based on the day of the week -->
    <div class="card blue-grey darken-1" >
             Vurrent date   {{ formatDate(e.DeliveryDate) }}h
          </div>
        </div>
        </div>
      </div>
    </template>

我们的代码部分有一个很好的 formatDate 函数，它提供了结构化的数据格式

<script>
const dateOptions = {
  weekday: "long",
  hour: 'numeric',
  year: "numeric",
  month: "numeric",
  day: "numeric",
  minute: 'numeric' ,
  hourCycle : "h24"
};



export default {
  data() {
    return {
      inventory: []
    };
  },
  mounted() {
    this.load();
    setInterval(this.load, 10000);
  },
  methods: {
    load() {
      fetch("http://localhost:8081/api/v1/prod/inventory")
        .then((res) => res.json())
        .then((data) => (this.inventory = data))
        .catch((err) => console.log(err.message));
    },
    formatDate(inStr) {
      const d = new Date(inStr);
      return d.toLocaleDateString("de-DE", dateOptions);
    },
  },
};
</script>

我是 vue 的初学者？你们将如何解决这个问题。问候迈克尔

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

我建议计算一个具有格式化日期和基于日期的类名的新数组。 computed prop caches the results，在组件需要重新渲染时提高渲染性能。

创建一个组件方法（名为"classForDay"），它根据星期几返回一个类名：

const dayClasses = [
  'inactive', // 0 = Sunday
  'active',   // 1 = Monday
  'inactive', // 2 = Tuesday
  'inactive', // 3 = Wednesday
  'active',   // 4 = Thursday
  'inactive', // 5 = Friday
  'inactive', // 6 = Saturday
]

export default {
  methods: {
    classForDay(date) {
      return dayClasses[new Date(date).getDay()]
    }
  }
}

创建一个computed property，它返回一个新的库存数组，包括格式化的日期（来自this.formatDate()）和基于日期的类名（来自this.classForDay()）：

export default {
  computed: {
    computedInventory() {
      return this.inventory.map(inv => ({
        ...inv,
        FormattedDate: this.formatDate(inv.DeliveryDate),
        DayClass: this.classForDay(inv.DeliveryDate),
      }))
    }
  }
}

使用模板中的计算属性，绑定DayClass和FormattedDate：

<template>
  <div class="row">
    <div v-for="(e, i) in computedInventory" >
      <div class="col s2 m3" v-if="e.Hidden == false" >
        <div class="card blue-grey darken-1" :class="e.DayClass" >
          Current date   {{ e.FormattedDate }}h
        </div>
      </div>
    </div>
  </div>
</template>

【讨论】：

【解决方案2】：

无需更改大部分代码，并且如果您不打算在另一个页面上使用此逻辑，您可以添加一个新数组作为 day 类的变量和一个获取数据的新方法，例如 @ 987654321@建议。

            <script>
    const dateOptions = {
      weekday: "long",
      hour: 'numeric',
      year: "numeric",
      month: "numeric",
      day: "numeric",
      minute: 'numeric' ,
      hourCycle : "h24"
    };

    const dayClasses = [
      'sundayClass',
      'mondayClass',
      'teusdayClass',
      'wednesdayClass',
      'thursdayClass',
      'fridayClass',
      'saturdayClass'
    ]

    export default {
      data() {
        return {
          inventory: []
        };
      },
      mounted() {
        this.load();
        setInterval(this.load, 10000);
      },
      methods: {
        load() {
          fetch("http://localhost:8081/api/v1/prod/inventory")
            .then((res) => res.json())
            .then((data) => (this.inventory = data))
            .catch((err) => console.log(err.message));
        },
        formatDate(inStr) {
          const d = new Date(inStr);
          return d.toLocaleDateString("de-DE", dateOptions);
        },
        getDayClass(date) {
          return dayClasses[new Date(date).getDay()]
        }
      },
    };
    </script>

并调用模板中的方法

    <template>
      <div class="row">
        <div v-for="(e, i) in inventory"
          :key="e.PreorderID + e.ArticleNumber"
        >
          <div class="col s2 m3" v-if="e.Hidden == false">
            <!--  The following DIV should be getting a specific CSS class based on the day of the week -->
            <div class="card blue-grey darken-1" :class="getDayClass(e.DeliveryDate)" >
              Vurrent date   {{ formatDate(e.DeliveryDate) }}h
            </div>
          </div>
        </div>
      </div>
    </template>

【讨论】：