有条件地渲染关闭标签以模拟日历行为

我可以有条件地用来呈现关闭标签v-if吗？如果是的话，正确的方法是什么？我的第一个直觉是：

这可以单独工作，但不会渲染原始-这是预期的行为吗？

如果这是不可能的-有条件地打破表行的最佳方法是什么？

我的具体情况是-阵列中每月的某几天以及其他信息。每天都有一个isSunday属性，我想在每个星期日之后开始新的一行（模仿日历行为）

通常，我建议将所有逻辑放在脚本中，而在模板部分仅使用属性和调用方法，因此在这种情况下，我将定义一个computed名为的属性，cptDays在其中循环遍历days数组，当我遇到正常情况时，如果星期天将其推入一周，则将其推入，然后增加周数，最后返回month在模板中循环通过它的数组。

注意

我使用了引导程序中的 CSS 进行了漂亮的外观，您可以将其删除，并且您的代码不会更改

new Vue({
  el: '#app',
  data: {
    days: [{
        "number": 1,
        "isSunday": false
      },
      {
        "number": 2,
        "isSunday": false
      },
      {
        "number": 3,
        "isSunday": false
      },
      {
        "number": 4,
        "isSunday": false
      },
      {
        "number": 5,
        "isSunday": false
      },
      {
        "number": 6,
        "isSunday": false
      },
      {
        "number": 7,
        "isSunday": true
      },
      {
        "number": 8,
        "isSunday": false
      },
      {
        "number": 9,
        "isSunday": false
      },
      {
        "number": 10,
        "isSunday": false
      },
      {
        "number": 11,
        "isSunday": false
      },
      {
        "number": 12,
        "isSunday": false
      },
      {
        "number": 13,
        "isSunday": false
      },
      {
        "number": 14,
        "isSunday": true
      },
      {
        "number": 15,
        "isSunday": false
      },
      {
        "number": 16,
        "isSunday": false
      },
      {
        "number": 17,
        "isSunday": false
      },
      {
        "number": 18,
        "isSunday": false
      },
      {
        "number": 19,
        "isSunday": false
      },
      {
        "number": 20,
        "isSunday": false
      },
      {
        "number": 21,
        "isSunday": true
      },
      {
        "number": 22,
        "isSunday": false
      },
      {
        "number": 23,
        "isSunday": false
      },
      {
        "number": 24,
        "isSunday": false
      },
      {
        "number": 25,
        "isSunday": false
      },
      {
        "number": 26,
        "isSunday": false
      },
      {
        "number": 27,
        "isSunday": false
      },
      {
        "number": 28,
        "isSunday": true
      },

      {
        "number": 29,
        "isSunday": false
      },
      {
        "number": 30,
        "isSunday": false
      },
      {
        "number": 31,
        "isSunday": false
      }
    ]
  },
  computed: {
    cptDays() {
      let mOnth= [],
        i = 0;
      this.days.forEach((day) => {

        if (!day.isSunday) {
          if (month[i] == undefined) {
            month[i] = [];
            month[i].push(day)
          } else {
            month[i].push(day)
          }


        } else {
          month[i].push(day)
          i++;
        }
      });
      return month;
    }

  }

})

  
  
  
  
  
  



  

    

      

        

          
Mon
          
Tue
          
Wed
          
Thi
          
Fri
          
Sat
          
Sun
        
      
      

        

          
{{day.number}}