<div id="my-app">
<p>
NewTask:
<input type="text" v-model="newTask" />
<button v-on:click="addTodo">Add</button>
</p>
<hr />
<ul>
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.isCompleted" />
<span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
<button v-on:click="deleteTodo(todo)">Delete</button>
</li>
</ul>
<p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p>
</div>ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul > li {
margin: 5px;
text-indent: 0;
}
ul > li > .complete {
text-decoration: line-through;
color: #ddd;
}new Vue({
el: '#my-app',
data: {
newTask: '',
todos: [
{ task: '牛乳を買う', isCompleted: false },
{ task: 'プロテインを買う', isCompleted: true },
{ task: 'スポーツドリンクを買う', isCompleted: false }
]
},
methods: {
addTodo: function() {
if( this.newTask == '' ) return;
this.todos.push(
{ task: this.newTask, isCompleted: false }
);
this.newTask = '';
},
deleteTodo: function(todo) {
this.todos.$remove(todo);
}
},
computed: {
remains: function() {
var counter = 0;
for(var i=0; i<this.todos.length; i++) {
if(!this.todos[i].isCompleted) {
counter ++;
}
}
return counter;
}
}
});
External CSS
This Pen doesn't use any external CSS resources.