Max*_*lov 3 javascript css vue.js vue-component vuejs2
我可以有条件地用来呈现关闭标签v-if吗？如果是的话，正确的方法是什么？我的第一个直觉是：
<template v-for="day in days">
<td class="days">{{day.number}}</td>
<template v-if="day.isSunday">
</tr>
<tr>
</template>
</template>
这可以单独工作，但不会渲染</tr><tr>原始-这是预期的行为吗？
如果这是不可能的-有条件地打破表行的最佳方法是什么？
我的具体情况是-阵列中每月的某几天以及其他信息。每天都有一个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;
}
}
})<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<table class="table table-striped">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thi</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr v-for="week in cptDays">
<td v-for="day in week ">{{day.number}}</td>
</tr>
</tbody>
</table>
</div>