有条件地呈现结束标记以模拟日历行为
Posted
技术标签:
【中文标题】有条件地呈现结束标记以模拟日历行为【英文标题】：Render closing tag conditionally in order to emulate calendar behavior 【发布时间】：2019-03-23 12:49:50 【问题描述】：我可以使用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> raw - 这是预期的行为吗？
如果这是不可能的 - 有条件地打破表格行的最佳方法是什么？
我的具体情况是 - 包含附加信息的数组中的月份天数。每天都有一个isSunday 属性，我想在每个星期日之后开始一个新行（模仿日历行为）
【问题讨论】：
使用计算来将你的数据处理成你想要的格式，并迭代格式化的数据。在这种情况下，您希望将数据分解为数周。 You can do something like this. 【参考方案1】：通常我建议将所有逻辑放在你的脚本中，并且只使用模板部分中的属性和调用方法，所以对于这种情况，我将定义一个名为 cptDays 的 computed 属性，我在其中循环遍历days 数组，当我遇到正常的一天时，如果当天是 Sunday，我会在一周内推送它我推送它并增加周数，最后我返回 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>【讨论】：
以上是关于有条件地呈现结束标记以模拟日历行为的主要内容，如果未能解决你的问题，请参考以下文章
我应该使用带有 render 属性的 ui:fragment 来有条件地在带有 JSF 2.2 的 Facelets 中呈现 HTML 标记吗？