大佬教程收集整理的这篇文章主要介绍了基于日期的 Vue JS 上的条件 CSS，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
任务是：为一周中的每一天使用特定的 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 的初学者？你们会如何解决这个问题。 问候 迈克尔
我建议计算一个具有格式化日期和基于日期的类名的新数组。 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>
无需更改您的大部分代码，如果您不打算在另一个页面上使用此逻辑，您可以添加一个新数组作为 day 类的变量和一个新方法来获取数据，例如 { {3}} 建议。
@H_874_61@ <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>
并调用模板中的方法
@H_874_61@ <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>
以上是大佬教程为你收集整理的基于日期的 Vue JS 上的条件 CSS全部内容，希望文章能够帮你解决基于日期的 Vue JS 上的条件 CSS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。