基于Date的Vue JS的条件CSS

Question

任务是:对一周中的每一天使用特定的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的初学者。你们要怎么解决这个问题。问候迈克尔。

Answer 1

我建议计算一个具有格式化日期和基于日期的类名的新数组。计算prop缓存结果，如果组件需要重新渲染，这将提高渲染性能。

1. 创建一个组件方法(命名为"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()]
   }
   }
   }
   

2. 创建一个计算属性，返回一个新的库存数组，包括格式化的日期(来自this.formatDate())和基于天的类名(来自this.classForDay()):

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

3. 在模板中使用computed属性，绑定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>
   

Answer 2

无需更改太多代码，如果您不打算在另一个页面上使用此逻辑，您可以添加一个新的数组作为day类的变量和一个获取数据的新方法，就像tony19建议的那样。

<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>