Javascript 有条件地呈现结束标记以模拟日历行为

是否可以使用

v-if

有条件地呈现结束标记？如果是，正确的方法是什么？我的第一直觉是：

<template v-for="day in days">
    <td class="days">{{day.number}}</td>
        <template v-if="day.isSunday">
            </tr>
            <tr>
        </template>
</template>

{{day.number}

这是独立工作的，但它不会呈现原始的-这是预期的行为吗

如果这是不可能的，那么有条件地中断表行的最佳方法是什么

---

我的具体情况是，在一个包含额外信息的数组中，每个月有-天。每天都有一个

isSunday

属性，我想在每个星期天之后开始一个新行（模仿日历行为）

通常我建议将所有逻辑放在脚本中，只使用模板部分的属性和调用方法，因此，对于这种情况，我将定义一个名为

cptDays

的

computed

属性，在该属性中，我循环通过

days

数组，当我遇到一个正常的日子时，我在一周内推它，如果这一天是星期天，我推它并增加周数，最后，我返回

month

数组，我在模板中循环使用它

注意

我使用了引导中的CSS来提供一个漂亮的外观，您可以删除它，并且您的代码不会被更改

newvue({
el:“#应用程序”，
数据：{
天数：[{
“数字”：1，
“isSunday”：错误
},
{
“数字”：2，
“isSunday”：错误
},
{
“数字”：3，
“isSunday”：错误
},
{
“数字”：4，
“isSunday”：错误
},
{
“数字”：5，
“isSunday”：错误
},
{
“数字”：6，
“isSunday”：错误
},
{
“数字”：7，
“isSunday”：正确
},
{
“数字”：8，
“isSunday”：错误
},
{
“数字”：9，
“isSunday”：错误
},
{
“数字”：10，
“isSunday”：错误
},
{
“数字”：11，
“isSunday”：错误
},
{
“数字”：12，
“isSunday”：错误
},
{
“数字”：13，
“isSunday”：错误
},
{
“数字”：14，
“isSunday”：正确
},
{
“数字”：15，
“isSunday”：错误
},
{
“数字”：16，
“isSunday”：错误
},
{
“数字”：17，
“isSunday”：错误
},
{
“数字”：18，
“isSunday”：错误
},
{
“数字”：19，
“isSunday”：错误
},
{
“数字”：20，
“isSunday”：错误
},
{
“数字”：21，
“isSunday”：正确
},
{
“数字”：22，
“isSunday”：错误
},
{
“数字”：23，
“isSunday”：错误
},
{
“数字”：24，
“isSunday”：错误
},
{
“数字”：25，
“isSunday”：错误
},
{
“数字”：26，
“isSunday”：错误
},
{
“数字”：27，
“isSunday”：错误
},
{
“数字”：28，
“isSunday”：正确
},
{
“数字”：29，
“isSunday”：错误
},
{
“数字”：30，
“isSunday”：错误
},
{
“数字”：31，
“isSunday”：错误
}
]
},
计算：{
cptDays（）{
设月份=[]，
i=0；
此.days.forEach（（天）=>{
如果（！天.发行日）{
如果（月[i]==未定义）{
月[i]=[]；
月[i]。推送（天）
}否则{
月[i]。推送（天）
}
}否则{
月[i]。推送（天）
i++；
}
});
返回月份；
}
}
})

JS-Bin
周一
星期二
结婚
这
星期五
坐
太阳
{{day.number}

使用computed将数据转换为所需的格式，并迭代格式化数据。在这种情况下，您希望将数据分为几周。