Vue JS 上基于日期的条件 CSS

Posted 2023-02-22

【中文标题】Vue JS 上基于日期的条件 CSS

【英文标题】：Conditional CSS on Vue JS based on Date

【发布时间】：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 的初学者？你们将如何解决这个问题。 问候 迈克尔

【参考方案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>