1777
No
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.todo{
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>ToDo 리스트</h2>
<div id="app">
<div v-for="(todo, index) in todos" class="todo">
<label>
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{donestyle:todo.done}">{{todo.text}}</span>
(완료일 {{todo.dodate}})
<button @click="extendDate(index)">완료일 연장</button>
</label>
</div>
<input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo"
placeholder="할일">/
<input type="number" v-model.trim.number="addDodate" v-on:keyup.enter="addToDo"
placeholder="완료일">(YYYYMMDD 형식으로 입력)
<p><button v-on:click="cleanToDo">처리완료삭제</button>
<button v-on:click="sortData('todo')">할일순으로 정렬</button>
<button v-on:click="sortData('dodate')">완료일로 정렬</button>
</p>
<p>{{todos.length}}건 중 {{remaining}} 처리, {{overdate}}건 완료일 지남</p>
</div>
<script>
new Vue({
el: '#app',
data: {
todos:[
{done:false, text:'회사모임' ,dodate:'20211019'},
{done:false, text:'종교활동', dodate:'20211111'},
{done:false, text:'영화보기', dodate:'20211111'},
{done:false, text:'공부하기', dodate:'20211110'},
{done:true, text:'vue.js 개발',dodate:'20211110'}
],
addtext:"",
addDodate:"",
},
methods: {
addToDo(){
if(this.addtext ){
let inputDate=this.addDodate;
if(!inputDate){
//날짜 미입력시 하루 추가
let today=new Date();
today.setDate(today.getDate()+1);
const year=today.getFullYear();
const month=('0' + (today.getMonth()+1) ).slice(-2);
const day=('0' + today.getDate() ).slice(-2);
inputDate =year +""+month+""+day;
}
const data={
done:false,
text:this.addtext,
dodate:inputDate
}
this.todos.push(data);
this.addtext="";
this.addDodate="";
}
},
cleanToDo(){
this.todos=this.todos.filter(function(item, index, array){
return item.done===false;
});
} ,
extendDate(index){
const currentDate = this.todos[index].dodate;
const today=new Date();
const year=today.getFullYear();
const month=('0' + (today.getMonth()+1) ).slice(-2);
const day=('0' + today.getDate() ).slice(-2);
toDate =year +""+month+""+day;
if(currentDate<toDate){
console.log("지난 날짜 1일 연장 가능");
const y = currentDate.substr(0, 4);
const m = currentDate.substr(4, 2);
const d = currentDate.substr(6, 2);
//문자열 날짜(Date) 변환하기
const conVertDate = new Date(y, m-1, d);
console.log(conVertDate);
conVertDate.setDate(conVertDate.getDate()+1);
const udate_year=conVertDate.getFullYear();
const date_month=('0' + (conVertDate.getMonth()+1) ).slice(-2);
const date_day=('0' + conVertDate.getDate() ).slice(-2);
const update_inputDate =udate_year +""+date_month+""+date_day;
const updateData={
done:this.todos[index].done,
text:this.todos[index].text,
dodate:update_inputDate
}
this.todos.splice(index ,1,updateData);
//this.todos[index].DueDate = due_date;
}else{
console.log("날짜 연장 불가능");
}
},
sortData(type){
if(type==="todo"){
this.todos.sort(function(a, b){
return a.text <b.text? -1:1
});
}else if(type==="dodate"){
this.todos.sort(function(a, b){
return a.dodate <b.dodate? -1:1
});
}
}
},
computed:{
remaining(){
return this.todos.filter(function(item , idex, array){
return item.done;
}).length;
},
overdate(){
const today=new Date();
const year=today.getFullYear();
const month=('0' + (today.getMonth()+1) ).slice(-2);
const day=('0' + today.getDate() ).slice(-2);
toDate =year +""+month+""+day;
return this.todos.filter(function(item, index, array){
if(item.dodate<toDate){
return !item.done
}
}).length;
}
}
})
</script>
<style>
.donestyle{
text-decoration: line-through;
color: lightgray;
}
</style>
</body>
</html>
댓글 ( 4)
댓글 남기기