有条件地呈现结束标记以模拟日历行为 [英] Render closing tag conditionally in order to emulate calendar behavior
问题描述
我可以使用 v-if 有条件地呈现结束标记吗?如果是，那么正确的做法是什么?我的第一直觉是:
<td class="days">{{day.number}}</td><模板 v-if="day.isSunday"></tr><tr>这本身就有效，但它不会呈现 </tr><tr> 原始 - 这是预期的行为吗?
如果这是不可能的 - 有条件地打破表格行的最佳方法是什么?
我的具体情况是 - 数组中的月份中的天数，并为其提供附加信息.每天都有一个 isSunday 属性，我想在每个星期日之后开始一个新行 (模仿日历行为)
通常我建议将所有逻辑放在脚本中，并且只在模板部分使用属性和调用方法，因此对于这种情况，我将定义一个computed 称为 cptDays 的属性，在其中我循环遍历 days 数组，当我遇到正常的一天时，如果当天是Sunday 我推送它并增加周数，最后我返回 month 数组，我在模板中循环遍历它.
注意
我使用了 bootstrap 中的 CSS 来提供漂亮的外观，您可以将其删除并且不会更改您的代码
new Vue({el: '#app',数据: {天: [{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() {让月份 = [],我 = 0;this.days.forEach((day) => {如果 (!day.isSunday) {如果(月 [i] == 未定义){月[i] = [];月 [i].push(day)} 别的 {月 [i].push(day)}} 别的 {月 [i].push(day)我++;}});返回月份；}}})<头><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/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwgnJ8ER"cross;<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script><身体><div id="应用程序"><table class="table table-striped"><头><tr><th>周一</th><th>周二</th><th>周三</th><th>Thi</th><th>周五</th><th>周六</th><th>Sun</th></tr></thead><tr v-for="cptDays 中的周"><td v-for="星期几">{{day.number}}</td></tr></tbody>Can I render closing tag conditionally with v-if? And if yes, what's the right way to do it? My first instinct was this:
<template v-for="day in days">
<td class="days">{{day.number}}</td>
<template v-if="day.isSunday">
</tr>
<tr>
</template>
</template>
This works on its own, but it wont render </tr><tr> raw - is this expected behavior?
And if this is impossible - what is the best way to break a table row conditionally?
My specific case is - days of the month in an array with additional info for them. Each day has a isSunday property and I want to start a new row after each Sunday (imitating calendar behavior)
解决方案 Usually I recommend to put the all logic in your script and only use properties and call methods in the template section, so for this case I'm gonna define a computed property called cptDays in which I loop through the days array and when I meet a normal day I push it in a week if the day is Sunday I push it and I increment the number of weeks, in the end I return the month array which I loop through it in my template.
Note
I used CSS from bootstrap to give a pretty look, you could remove it and your code will not be changed
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>
这篇关于有条件地呈现结束标记以模拟日历行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆