Skip to content

Instantly share code, notes, and snippets.

@takanorip
Last active October 13, 2016 13:02
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
TODO by Vue.js
<div id="myApp">
<p>
Task:
<input type="text" v-model="newTask" v-on:keyup.enter="addTask()">
<button v-on:click="addTask()">ADD</button>
</p>
<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="deleteTask(todo)">Delete</button>
</li>
</ul>
<p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p>
</div>
new Vue ({
el: '#myApp',
data: {
newTask: '',
todos: [
{ task: 'buy a book', isCompleted: false },
{ task: 'buy a cake', isCompleted: false },
{ task: 'buy a sugar', isCompleted: true }
]
},
methods: {
addTask: function(){
if(this.newTask==''){
return;
} else {
this.todos.push({
task: this.newTask,
isCompleted: false
});
this.newTask = '';
}
},
deleteTask: 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;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li{
margin: 5px;
text-indent: 0;
}
ul li .complete{
text-decoration:line-through;
color: #ddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment