Vue.jsのお勉強。
とりあえずデータの保存は置いておいて、
・TODOリストの追加、削除
・チェックボックスにチェックで取り消し線表示
を実装するまで。
操作イメージは以下のような感じで。
HTML
<html lang="jp">
<head>
<link rel="stylesheet" href="css/main.css">
<title>TODO List</title>
</head>
<body>
<div id="app">
<h2>
TODO List
</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="additem">
Add
</button>
</form>
<ul>
<li v-for="(todo, index) in todos">
<input type="checkbox" v-model="todo.isDone">
<span v-bind:class="{done: todo.isDone}">{{todo.item}}</span>
<button v-on:click="deleteitem(index)">
delete
</button>
</li>
</ul>
<!-- <pre>{{$data}}</pre> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
#app ul{
list-style:none;
}
#app li > span.done {
text-decoration: line-through;
}
JavaScript
var app = new Vue({
el: "#app",
data: {
newItem: '',
todos: [],
},
methods: {
additem: function(event){
if(this.newItem == '') return;
var todo = {
item: this.newItem,
isDone: false,
};
this.todos.push(todo);
this.newItem = '';
},
deleteitem: function(index){
this.todos.splice(index,1)
}
}
})
コメント