时间戳

首页 > 解决方案 > 课堂逻辑太多

vue.js - 课堂逻辑太多

问题描述

所以我制作了这段代码，它可以正常工作

<tr
          v-for="(day, index) in days"
          :key="index"
          :class="[
            { no_target: day.date.format('dddd') == 'Sunday' || day.date.format('dddd') == 'Saturday' },
            { active: moment == day.date.format('Do dddd') },
          ]"
          class="calendar-row"
        >

这会将 no_target 类添加到周末，并将活动添加到今天的日期。然而，我的老板认为这是一个类内部的太多逻辑，并希望我将其移至方法或计算属性。我似乎真的想不出一个解决方案。

你们中的任何一个头脑敏锐的人都有解决方案吗？

标签： vue.jsmethodsnuxt.js

解决方案

我认为使用这样的方法可能会有所帮助

methods: {
    isHoliday(day) {
      const formattedDay = day.date.format("dddd");
      return ["Sunday", "Saturday"].includes(formattedDay);
    },
  },

所以你可以这样做

<tr v-for="(day, index) in days"
          :key="index"
          :class="[
            { no_target: isHoliday(day)},
            { active: moment == day.date.format('Do dddd') },
          ]"
          class="calendar-row">

推荐阅读