1. 화면
2. 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-Django To Do App</title>
<style>
body {
text-align: center;
background-color: #ddd;
}
.inputBox {
margin: auto;
width: 70%;
background: white;
height: 50px;
border-radius: 50px;
line-height: 50px;
}
.inputBox .name {
border-style: none;
border-bottom: 1px solid #ddd;
width: 70px;
padding-left: 20px;
}
.inputBox .item {
border-style: none;
border-bottom: 1px solid #ddd;
width: 400px;
margin-left: 50px;
padding-left: 20px;
}
.todoList {
list-style: none;
padding: 10px 0;
text-align: left;
}
.todoList li {
display: flex;
height: 50px;
line-height: 50px;
margin: 0.5rem 0;
padding: 0 0.9rem;
background: white;
border-radius: 5px;
}
.removeBtn {
margin-left: auto;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>My To do App !</h1>
<strong>서로 해야할 일을 입력해 보아요</strong>
<br>
<div class="inputBox">
<input type="text" class="name" placeholder="작성자">
<input type="text" class="item" placeholder="해야할 일을 입력해주세요">
<button>추가</button>
</div>
<ul class="todoList">
<li v-for="todo in todoList">
<span>{{ todo.name }} :: {{ todo.item }}</span>
<span class="removeBtn">×</span>
</li>
</ul>
<div/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
todoList: [
{name: '나', item: '지금 듣고 있는 강의 완강하기'},
{name: '나', item: '퍼블리싱하기'},
{name: '나', item: '최종 제출되게 일단 만들어 놓기'},
{name: '나', item: '코드 리뷰 받기'},
]
},
methods:{}
})
</script>
</body>
<3. 리스트 렌더링
v-for로 엘리먼트에 배열 매핑하기
// 기본 사용 방법
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul><ul class="todoList">
<li v-for="todo in todoList">
<span>{{ todo.name }} :: {{ todo.item }}</span>
<span class="removeBtn">×</span>
</li>
</ul>