我可以使用 v-if 有条件地呈现结束标记吗？ ？如果是，正确的方法是什么？我的第一 react 是:
<template v-for="day in days">
<td class="days">{{day.number}}</td>
<template v-if="day.isSunday">
</tr>
<tr>
</template>
</template>
它自己工作，但它不会渲染 </tr><tr> raw - 这是预期的行为吗？
如果这是不可能的 - 有条件地打破表格行的最佳方法是什么？
我的具体情况是 - 包含附加信息的数组中的一个月中的几天。每天都有一个isSunday属性，我想在每个星期天之后开始一个新行(模仿日历行为)
最佳答案
通常我建议将所有逻辑放在脚本中，只在模板部分使用属性和调用方法，因此对于这种情况，我将定义一个名为 cptDays 的 在其中循环遍历 computed 属性days 数组，当我遇到正常的一天时，如果那天是星期日，我会在一周内推送它，我会推送它并递增周数，最后我返回 month 数组，我在模板中循环它。
注意
我使用了 bootstrap 的 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>关于javascript - 有条件地呈现结束标记以模拟日历行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52878624/