[Vue.js] TodoList 만들기(연습)
2021. 3. 9. 22:16ㆍVue.js
<App.vue>
<template>
<div class="flex flex-col items-center bg-gray-200">
<h1 class="">Todo List</h1>
<input type="text" class="form-control border border-black" v-model="userInput" @keyup.enter="addNewTodo">
<div class="bg-gray-200 w-full text-center flex flex-col items-center">
<template v-for="todo in activeTodoList" v-bind:key="todo.label">
<button class="bg-green-200 w-6/12 text-left px-3 py-3" @click="toggleTodoState(todo)">
{{todo.label}}
</button>
</template>
</div>
<div class="text-right">
<button class="" @click="chageCurrentState('active')">할 일</button>
<button @click="chageCurrentState('done')">완료</button>
<button @click="chageCurrentState('all')">전체</button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'App',
data(){
return{
userInput: "",
todoList: [] = [],
currentState:'active'
};
},
computed:{
activeTodoList(){
return this.todoList.filter((todo : any) => this.currentState === 'all' || todo.state === this.currentState);
}
},
methods: {
chageCurrentState(state:any){
this.currentState = state;
},
addNewTodo(){
this.todoList.push({
label: this.userInput,
state: 'active'
});
this.userInput = '';
},
toggleTodoState(todo:any){
todo.state = todo.state === 'active' ? 'done' : 'active';
}
},
components: {
}
})
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
'Vue.js' 카테고리의 다른 글
[Vue.js] TodoList 만들기(연습2-내용정리, component 적용, 초기화 기능 구현 등) (0) | 2021.03.10 |
---|---|
[Vue.js] VITE 개념(feat.CLI) (0) | 2021.03.10 |
[Vue.js] npm, package.json 개념 (0) | 2021.02.20 |
[Vue.js] node.js (0) | 2021.02.20 |
[Vue.js] v-model (0) | 2021.01.05 |