javascript - 有条件地呈现结束标记以模拟日历行为
问题描述
我可以有条件地渲染结束标签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
我在模板中循环遍历它的数组。
笔记
我使用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>
推荐阅读
- reactjs - 更新状态而不渲染整个 React 组件(useState)
- reactjs - React 最终形式重置为初始值
- ios - 允许 HKWorkoutRoute 权限但不允许 HKWorkout 权限导致应用程序崩溃
- dynamic - 动态更改 SQL 查询中使用的项目
- java - @ManyToOne 单向在 Spring JPA DATA 中不起作用
- java - 如何将文件从前端 Angular 上传到数据库中的 java API
- svg - 使文本动态适应 SVG 中的路径元素
- python - 解析字典以具有一对一的键值映射
- java - 从 ItemTouchHelper 取消 pendingIntent
- python - 如何修复“UnboundLocalError:分配前引用的局部变量'user_score'”?