728x90
반응형
Vue.js의 TodoMVC
ToDo list 연결 스크립트
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>https://kr.vuejs.org/v2/examples/todomvc.html
TodoMVC — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
ToDo 리스트 만들기 : 임시데이터로 todo리스트 표시
<body>
<h2>ToDo 리스트 만들기</h2>
<hr>
<div id="app">
<div v-for="todo in todos">
<label>
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{donestyle:todo.done}">{{ todo.text }}</span>
</label>
</div>
<p>[ {{ remaining }} / {{ todos.length }} ] 건 처리</p>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{done: false, text : '빵 사기'}, {done: false, text : '목살 사기'},
{done: false, text : '저녁하기'}, {done: false, text : '일기쓰기'},
{done: false, text : '과제하기'},
]
},
computed: {
remaining: function(){
return this.todos.filter(function(val){
return val.done;
}).length;
}
}
})
</script>
<style>
.donestyle {
text-decoration: line-through;
color: lightgray;
}
</style>
</body>
추가 & 삭제 기능 넣기
<body>
<h2>ToDo 리스트 만들기</h2>
<hr>
<div id="app">
<div v-for="todo in todos">
<label>
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{donestyle:todo.done}">{{ todo.text }}</span>
</label>
</div>
<input type="text" placeholder="할일" v-model="addtext" v-on:keyup.enter="addToDo">
<p><button v-on:click="cleanToDo">처리완료 목록 삭제</button></p>
<p>[ {{ remaining }} / {{ todos.length }} ] 건 처리</p>
</div>
<script>
new Vue({
el: '#app',
data: {
addtext: '',
todos: [
{done: false, text : '빵 사기'}, {done: false, text : '목살 사기'},
{done: false, text : '저녁하기'}, {done: false, text : '일기쓰기'},
{done: false, text : '과제하기'},
]
},
computed: {
remaining: function(){
return this.todos.filter(function(val){
return val.done;
}).length;
}
},
methods: {
addToDo :function(){
if(this.addtext){
this.todos.push({done: false, text: this.addtext});
this.addtext = '';
}
},
cleanToDo :function(){
this.todos = this.todos.filter(function(val){
return val.done == false;
})
}
}
})
</script>
<style>
.donestyle {
text-decoration: line-through;
color: lightgray;
}
button {
padding: 6px 12px;
border-radius: 6px;
color: #fff;
border: 2px;
background-color: #007bff;
}
button:hover {
background-color: #50657a;
}
button:active {
background-color: #003c7c;
}
</style>
</body>
728x90
반응형