v-on, v-attr, v-classで機能追加しています。データの追加はpush,削除はspliceです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My ToDos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<style>
body {
font-size: 13px;
font-family: Arial;
}
h1 {
font-size: 14px;
border-bottom:1px solid #ddd;
padding: 0 0 5px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 0 5px;
}
ul > li {
padding: 0 0 5px;
}
input[type=text]{
padding: 4px;
border-radius: 4px;
}
.done {
text-decoration: line-through;
color: #aaa;
}
.linkLike {
color: blue;
cursor: pointer;
font-weight: normal;
}
</style>
</head>
<body>
<div id="myapp">
<h1>
My ToDos
<small>({{remaining}}/{{todos.length}})</small>
<span class="linkLike" v-on="click:purge">[purge]</span>
</h1>
<ul>
<li v-repeat="todos">
<input type="checkbox" v-attr="checked: done" v-on="click: done = !done">
<span v-class="done: done">{{task}}</span>
<span class="linkLike" v-on="click:del($index)">[x]</span>
</li>
</ul>
<input type="text" v-model="newTask" placeholder="new task..." v-on="keyup:add | key enter">
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#myapp',
data: {
newTask: '',
todos : [
{task: 'task 1', done: false},
{task: 'task 2', done: true},
{task: 'task 3', done: false}
]
},
computed: {
remaining: function(){
var count = 0;
for (var i = 0, j = this.todos.length; i < j; i++){
if(!this.todos[i].done){
count++;
}
}
return count;
}
},
methods: {
add: function(){
this.todos.push({
task: this.newTask,
done: false
});
newTask = ''
},
del: function(index){
if (confirm("are you sure?")){
this.todos.splice(index, 1);
}
},
purge: function(){
var i = this.todos.length;
while (i--){
if(this.todos[i].done){
this.todos.splice(i, 1);
}
}
}
}
});
</script>
</body>
</html>
