TheBojda/vue_todo.html

## vue_todo.html
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Vue.js TODO Example</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<table>
			<tr v-for="(todo, idx) in todos">
				<td>{{todo}}</td>
				<td><button @click="removeItem(idx)">Done</button></td>
			</tr>
			<tr>
				<td><input type="text" placeholder="TODO item" v-model="todoText" /></td>
				<td><button @click="addItem">Add</button></td>
			</tr>
		</table>
	</div>
	<script>
		new Vue({
			el: '#app',
			data: {
				todoText: '',
				todos: []
			},
			methods: {
				addItem() {
					this.todos.push(this.todoText);
					this.todoText = '';
				},
				removeItem(idx) {
					this.todos.splice(idx, 1);
				}
			}
		});
	</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Vue.js TODO Example</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
	<div id="app">
	<table>
	<tr v-for="(todo, idx) in todos">
	<td>{{todo}}</td>
	<td><button @click="removeItem(idx)">Done</button></td>
	</tr>
	<tr>
	<td><input type="text" placeholder="TODO item" v-model="todoText" /></td>
	<td><button @click="addItem">Add</button></td>
	</tr>
	</table>
	</div>
	<script>
	new Vue({
	el: '#app',
	data: {
	todoText: '',
	todos: []
	},
	methods: {
	addItem() {
	this.todos.push(this.todoText);
	this.todoText = '';
	},
	removeItem(idx) {
	this.todos.splice(idx, 1);
	}
	}
	});
	</script>
	</body>

	</html>