반응형
일정 동작을 에뮬레이트하기 위해 닫힘 태그를 조건부로 렌더링합니다.
종료 태그를 조건부로 렌더링할 수 있습니까?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매주 일요일 이후에 새 행을 시작하고 싶다(일정표 동작 흉내내기)
보통 스크립트에 모든 로직을 삽입하고 템플릿섹션에는 속성 및 콜 메서드만 사용하는 것이 좋습니다.따라서 이 경우,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>언급URL : https://stackoverflow.com/questions/52878624/render-closing-tag-conditionally-in-order-to-emulate-calendar-behavior
반응형
'source' 카테고리의 다른 글
| Enum이 인터페이스를 구현하는 이유는 무엇입니까? (0) | 2022.08.21 |
|---|---|
| gitlab-ci에서의 VueJS 앱 e2e 테스트 (0) | 2022.08.20 |
| vee-validate와 함께 작동하도록 커스텀 입력 컴포넌트를 수정하는 방법 (0) | 2022.08.20 |
| Vuex 프로젝트 구조에서 모델 클래스를 배치할 위치 (0) | 2022.08.20 |
| 여러 Atribut을 사용하지 않고 semantic-ui-vue 드롭다운에 플레이스 홀더를 표시하려면 어떻게 해야 합니까? (0) | 2022.08.20 |