-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
실행이 안되는데 이유를 몰겠어여
19.05.12 13:42 작성 조회수 107
0
html 출력이 잘안되서여 vue를 잘못부른건지 태그가 잘못된건지 알려주시면 감사여
코드는
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-Django ToDo 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 Todo App !</h1>
<strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
<br>
<div class="inputBox">
<input class="name" type="text" placeholder="name ...">
<input class="item" type="text" placeholder="type anything welcomed ...">
<button>ADD</button>
</div>
<ul class="todoList">
<li v-for="todo in todoItems">
<span> {{todo.name}} :: {{todo.item}}</span>
<span class="removeBtn">×</span>
</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
todoItems:[
{name:'김석훈', item:'django와 vue js'},
{name:'김석현', item:'django와 react'},
{name:'김석진', item:'django와 bootstrap'},
{name:'김석민', item:'django와 css'},
],
},
methods:{},
}),
</script>
</body>
</html>
답변을 작성해보세요.
0
김석훈
지식공유자2019.05.16
독자님. 이제사 보았네요. 미안합니다.
new Vue({ ... }),
문법 에러입니다. 위 코드에서 마지막 콤마를 지워 보세요.
해결 안되면 다시 알려주세요. 감사합니다.
답변 1