대한민국안녕하세요 오늘안에 한두가지 기능을 추가하려다 보니 도무지 진도가 나가지 않는 문제가 생겨 질문드립니다...
1일 기준으로 현재월을 활성화 / 전월을 비활성화 하고 20일을 기준으로 다음달 바로가기 버튼을 활성화 하려고 합니다...
예를들어
현재 1월19일이면 1월만 활성화 2~10월 모두 비활성화
현재 1월20일이면 1월과 2월 활성화 3~10월 모두 비활성화
현재 2월1일이면 1월 비활성화 2월만 활성화 3~10월 모두 비활성화
현재 2월19일이면 1월 비활성화 2월만 활성화 3~10월 모두 비활성화
현재 2월10일이면 2월과 3월 활성화 4~10월 모두 비활성화
이런형태입니다.
바로가기버튼 비활성화는 disabled 명령어를 통해 해결이 되는데
<v-btn v-bind:href="'http://nas'+i+'.test.com'" disabled> 바로가기</v-btn>
조건문과 현재 날짜 비교하는것에서 막혔습니다....
v-if / moment / moment.js 를 이용하면 해결이 될 것도 같은데 혹시 작은 조언이라도 가능하시면 부탁드립니다.
<template>
<v-card
max-width="mx-auto"
class="mx-auto"
>
<v-app-bar
dark
>
<v-toolbar-title>신청서</v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-container>
<v-row dense>
<v-col
v-for="(item, i) in 10"
:key="i"
cols="12"
>
<v-card
dark
>
<v-list-item two-line>
<v-card-title class="headline"><h3>{{i+1}}월 신청</h3></v-card-title>
<v-card-actions>
<div class="order" >
<v-btn v-bind:href="'http://nas'+i+'.test.com'"> 바로가기</v-btn>
</div>
</v-card-actions>
</v-list-item>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
아래 script 에 추가하는
computed 속성으로 해결 하시면 될것 같습니다.
아래는 간단한 예제 입니다.
.
.
<div :class="computed_test">
.
.
<script>
export default{
name: "TEST",
data() {
return {
....
}
},
computed: {
computed_test: function() {
return {
'view': 조건1 || 조건2 .......,
}
}
}
}
조건1 또는 조건2 가 맞을때 html의 div 에 class="view" 가 적용 됩니다.
개발이 본업은 아니라 짬짬이 공부하면서 하고있는데 워낙 기초가없다보니 질문도 두서가 없었습니다.
계속해서 책은 보는데 책만 보다보니 좀 뭐랄까...
실제 필요한걸 짤때 필요한 무언가를 직접적으로 주지는 못하는것같다고 느껴서 당장필요한걸 한번 건드려 보았습니다^^
를
<v-btn v-bind:href="'http://nas'+i+'.test.com'" :disabled="checkDate(i)"> 바로가기</v-btn>
<script>
export default{
name: "TEST",
methods: {
checkDate(checkM) {
let now = new Date()
let nowM = now.getMonth() + 1 // month 는 0부터 시작하기 때문에 + 1 해주셔야 현재 달이 나옵니다.
let nowD = now.getDate()
if (nowD < 19 && nowM == checkM) {
return true
}
if (nowD > 19 && (checkM == nowM || checkM == nowM + 1)) {
return true
}
return false
}
},
이런식으로 처리 하시면 될 것 같습니다. 저도 초보라..
그냥 물어서 답만 받기 보다는 문서를 읽어 보시는게 좋을것 같아 리플달았습니다.
12월일 경우 1월을 활성화 해야 하면 그부분은 따로 추가 하시면 될듯
한번 적용해봐야겠습니다.^^
지금보니 그러네요
작은 표현하나가 저한테는 어려운부분인데 시간내어 고민해주셔서 정말 감사드립니다.
일단 스크립트에 조건문을 구겨넣고(날짜 비교겠죠?)
해당 조건문 내에서 "HTML 출력문"을 써서 날짜에 따라 서로 다른 버튼 링크 html을 "출력"해서 대응했을 겁니다
(제 경우는 cgi로 된 반복 게시판에 반복출력문을 넣으면서 써 먹은 것 같은데)
document.write(변수);
이거할때 따옴표에 주의하셔야... 만날 그걸로 해맴
그리고 날짜 비교를 년/월/일 로 비교문을 만들면 머리 깨지실 겁니다
그거 잊으시고 무조건 타임스탬프 쓰세요. 전 로또핫키에도 타임스탬프만 고집합니다
계산이 간편해지거든요. 30일/31일을 구분못한다는 한가지 단점은 있습니다만(이때는 월/일 추가조건문을 넣어주면 될 듯)
타임스탬프끼리의 연산은 지금으로부터 정확히 20일 전/후 같은걸 계산해줍니다