33 lines
961 B
HTML
33 lines
961 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>todo</title>
|
||
|
|
<script src="https://vuejs.org/js/vue.js"></script><!-- dev version -->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="todo-list-example">
|
||
|
|
<form v-on:submit.prevent="addNewTodo">
|
||
|
|
<label for="new-todo">Add a todo</label>
|
||
|
|
<input
|
||
|
|
v-model="newTodoText"
|
||
|
|
id="new-todo"
|
||
|
|
placeholder="E.g. Feed the cat">
|
||
|
|
<button>Add</button>
|
||
|
|
</form>
|
||
|
|
<ul>
|
||
|
|
<li
|
||
|
|
is="todo-item"
|
||
|
|
v-for="(todo, index) in todos"
|
||
|
|
v-bind:key="todo.id"
|
||
|
|
v-bind:title="todo.title"
|
||
|
|
v-on:remove="todos.splice(index, 1)"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|