#添加任务总数和删除任务
vue/13.tasks.html
```
<style>
*{ margin: 0; padding: 0; }
body{ margin: 50px; }
ul{ list-style: none; margin-bottom: 20px; }
button{ border: none; padding: 5px; color: #FFF; }
.completed{ text-decoration: line-through; }
</style>
<div id="app">
<task-app :list="tasks"></task-app>
<task-app :list="[{body: 'learn oop', completed: false}, {body: 'learn English', completed: true}]"></task-app>
</div>
<template id="task-template">
<h1>My tasks <span v-show="remaining">({{ remaining }})</span></h1>
<ul>
<li v-on:click="toggleTasks(task)" :class="{'completed':task.completed}" v-for="task in list">{{ task.body }} <strong v-on:click="deleteTask(task)">X</strong></li>
</ul>
</template>
<script src="vue.js"></script>
<script>
Vue.component('task-app', {
template: '#task-template',
props: ['list'],
methods: {
toggleTasks: function (task) {
task.completed = !task.completed;
},
deleteTask: function (task) {
this.list.$remove(task);
}
},
computed: {
remaining: function () {
return this.list.filter(function (task) {
return !task.completed;
}).length;
}
}
});
new Vue({
el: "#app",
data: {
tasks: [
{body:'go to the movie', completed:false},
{body:'learn vue js in action', completed:true},
{body:'go to the shop', completed:false}
]
}
});
</script>
```
