在vue中用动态class绑定实现根据不同的状态呈现不同的颜色显示

又隔段时间没写博客了，今天写下博客。之前在项目遇到要实现这样一个需求，如下图所示：

就是根据不同的状态呈现不同的颜色，一开始拿到这个需求的时候有点迷惑，后来自己查了下文档，发现可以这样做，废话不多说，直接上代码（相关逻辑代码可以忽略）：

//template里面
 <ul class="flex calendar_day font-ml flex">
   <li
      v-for="(item, index) in calendarInfo.calendars"
      :key="item.id"
      :class="[
        judgeFirstDay,
        item.approvalStatus === 0
          ? 'finishing'
          : item.approvalStatus === 1
          ? 'finish'
          : item.approvalStatus === 2
          ? 'unfinished'
          : ''
      ]"
   >{{ item.day }}</li>
 </ul>
// computed里面
  judgeFirstDay() {
      let day = "";
      if (this.calendarInfo.calendars[0]) {
        day = this.calendarInfo.calendars[0].week;
      }
      switch (day) {
        case 1:
          return "li_one";
          break;
        case 2:
          return "li_two";
          break;
        case 3:
          return "li_three";
          break;
        case 4:
          return "li_four";
          break;
        case 5:
          return "li_five";
          break;
        case 6:
          return "li_six";
          break;
        case 7:
          return "li_seven";
          break;
      }
    }
    //css
    .li_one {
      &:nth-child(7n + 1) {
        margin-left: 0vw;
      }
    }
    .li_two {
      &:nth-child(7n) {
        margin-left: 0vw;
      }
      &:first-child {
        margin-left: 12.1333vw;
      }
    }
    .li_three {
      &:nth-child(7n -1) {
        margin-left: 0vw;
      }
      &:first-child {
        margin-left: 24.2666vw;
      }
    }
    ......

上面主要用的是vue中动态class进行实现的，并结合了computed这一属性。其实judgeFirstDay也可以放在method里面，但有点不太好，官方有文档说明：

整个意思就是放在method里面的话，还有多次执行的可能。再截一张图

这样应该比较好理解了。
另外还有点需要补充的是，在css中用到子类选择器的时候，我们可以根据业务的逻辑和界面进行相关的计算，比如就像上面的7n,7n+1…因为n是从0开始，所以有些细心的同学会发现可能会出现负数的情况，开始自己也被这疑问给困惑住了，但经过多次测试发现负数的情况的，页面上是没有任何元素可以匹配的，所以我觉得我们可以忽略负数这种情况，根据规律写下计算公式就行。