728x90
반응형
vueex5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo리스트</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="todolistapp">
<div id="header" class="header">
<h2>Todo List App</h2>
<input class="input" type="text" id="task" placeholder="입력 후 엔터!" v-model.trim="todo"
v-on:keyup.enter="addTodo">
<span class="addbutton" v-on:click="addTodo">추 가</span>
</div>
<ul id="todolist">
<li v-for="a in todolist" v-bind:class="checked(a.done)" v-on:click="doneToggle(a.id)">
<span>{{ a.todo }}</span>
<span v-if="a.done"> (완료)</span>
<span class="close" v-on:click.stop="deleteTodo(a.id)">×</span>
</li>
</ul>
</div>
<script type="text/javascript">
let model = {
todo : "",
todolist : [
{ id:1, todo : "영화보기", done:false },
{ id:2, todo : "주말 산책", done:true },
{ id:3, todo : "ES6 학습", done:false },
{ id:4, todo : "잠실 야구장", done:false }
] };
let simple = new Vue({
el : '#todolistapp', data : model,
methods : {
checked : function(done) {
if(done) return { checked:true };
else return { checked:false };
},
addTodo : function(e) { //e : 이벤트 객체
if (this.todo.trim() !== "") { //빈문자열이 아닌 경우. 입력된 내용이 있는 경우
this.todolist.push //배열에 데이터 저장
({ id: new Date().getTime(), todo : this.todo.trim(), done:false });
this.todo = ""; //내용 제거.
}
},
deleteTodo : function(id) {
var index = this.todolist.findIndex(function(item) {
return item.id === id; })
this.todolist.splice(index,1); //todolist 배열에서 index에 해당하는 요소를 1개 삭제
},
doneToggle : function(id) {
//todolist 값 중 id에 해당하는 item객체의 index값을 저장
var index = this.todolist.findIndex(function(item) {
return item.id === id;
})
//false <= !true
//true <= !false
this.todolist[index].done = !this.todolist[index].done;
}
}
})</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 게시판 목록 조회하기 (boardlist.html, SiteMeshFilter.java, AjaxController.java, ShopService.java, BoardDao.java, BoardMapper.java) (0) | 2022.06.03 |
|---|---|
| [Vue] 28. 1부터 100까지 입력하기 (vueex4.html ) (0) | 2022.06.02 |
| [Vue] 28. CSS와 연결하기 (vueex3.html ) (0) | 2022.06.02 |
| [Vue] 28. style 설정하기 (vueex2.html ) (0) | 2022.06.02 |
| [Vue] 28. 마우스 이벤트 (vueex1.html) (0) | 2022.06.02 |