继上一篇搭建了这个Todo App的框架以后，我们轻松完成了为App增加一个task，此次须要完成的是对task的编辑，删除，完成等功用。假如你仔细看完，你会发明：在Vue中，统统本来那末简朴！

编辑一个task

我们之前经由过程下面的代码将每一个task轮回出来：

<li v-repeat="task: tasks"
    class="list-group-item">
    <span>{{ task.body }}</span>
</li>

有了每一个task以后，我们预备完成的是在用户双击task时刻，就是双击<span>{{ task.body }}</span>的时刻，用户可以对该task举行编辑。完成的思绪我大概是如许想的：

用户双击 --> 拿到task的body部份 --> 删除展现出来的task --> 将task的body部份赋给newTask  --> 回到增加task的流程 

考虑到这里，我们就遇到了一个题目，怎样删除task跑出来了，不是在编辑task么？好吧，趁便在这个时刻将删除task完成了吧，横竖一般的App都邑有删除功用，所以如今我们来先完成删除task。

删除task

为了更好地看到删除task，我为每一个task背面加了一个删除task的小按钮：

<span v-on="dblclick: editTask(task)">{{ task.body }}</span>

<button v-on="click: removeTask(task)">&#10007;</button>

上面<button v-on="click: removeTask(task)">&#10007;</button>这一行就是加了一个x删除小按钮，我们在这里运用Vue的事宜监听，当用户点击这个x按钮的时刻，我们实行removeTask要领，这个要领接收一个参数，就是task本身。所以在todo.js内里的methods部份加上removeTask：

removeTask: function(task) {
    this.tasks.$remove(task);
}

有无觉得异常简朴，就是两行代码罢了！这里的$remove要领是Vue官方供应的一个删除要领，实在就是运用了js的slice。接收到task以后，然后删除，easy enough。

在回到前面的编辑task，我们在完成了删除task以后，这个也变得异常轻易了。

完美编辑task

根据前面的思绪，我们起首须要为task的body绑定一个要领：

<li v-repeat="task: tasks"
    class="list-group-item">
    <span v-on="dblclick: editTask(task)">{{ task.body }}</span>
</li>

类似的，我们监听用户的双击事宜，假如用户双击了该span，我们实行editTask要领。所以，我们来写一下editTask要领：

editTask: function(task) {
    this.newTask = task.body;
    this.removeTask(task);
    this.$$.newTask.focus();
},

依然是将editTask放在todo.js的methods部份，该要领接收一个参数，就是须要编辑的task本身，然后将task的body部份赋给newTask，删除本来的task，末了就是为newTask输入框猎取一下核心。这里的newTask由于和input输入框举行了数据双向绑定，那末这个时刻input输入框就会自动添补task的body数据。像如许：

完成一个task

关于一个Todo App，用户新增一个task以后，重要的目标是为了完成这个task。这时刻我们就须要用到task的另一个属性了：completed。这是在前面一向都没有说起到的，如今终究要派上用场了。完成一个task，实在就是将completed属性的值设为true，所以我们来完成一下：

<span v-on="dblclick: editTask(task)">{{ task.body }}</span>

<button v-on="click: removeTask(task)">&#10007;</button>
<button v-on="click: toggleTaskCompletion(task)">&#10004</button>

像删除一个task一样，我在task背面又加了一个打勾的小按钮<button v-on="click: toggleTaskCompletion(task)">&#10004</button>。用户点击这个按钮的时刻，实行toggleTaskCompletion要领，为何叫toggleTaskCompletion而不叫completeTask呢，由于考虑到用户在点完成以后，有能够忏悔了，当他再次点击的时刻，task又回到了未完成的状况。所以上代码吧：

toggleTaskCompletion: function(task) {
    task.completed = ! task.completed;
},

这个要领中，我们只是将task中的completed属性设置为它的相反值，用户点击一次，这个值就转变一次。刚写完这个要领，你能够会如饥似渴去点击完成按钮，然则这个时刻貌似没有什么结果，然则chrome的console又没有报错，这是怎样回事？

实在答案就是：这段代码确切准确的实行了，只是我们在展现task的时刻没有根据task的completed状况来挑选以为罢了。

所以，为了完成这一功用，我们进而引入Vuejs的filters部份。

完成完成task与未完成的task星散

在完成之前，我们无妨用一个地区来展现完成的task，一个地区来展现未完成的task，所以跟展现task时刻很类似：

<div v-show="tasks.length">
    <h1>Tasks ({{ tasks.length }})</h1>

    <ol class="list-group">
        <li v-repeat="task: tasks | inProcess"
            class="list-group-item"
        >
            <span v-on="dblclick: editTask(task)">{{ task.body }}</span>

            <button v-on="click: removeTask(task)">&#10007;</button>
            <button v-on="click: toggleTaskCompletion(task)">&#10004</button>
        </li>
    </ol>
</div>




<!-- The List of Completed Tasks -->

    <h2>Completed </h2>

    <ol class="list-group">
        <li v-repeat="task: tasks | filterBy true in completed"
            class="list-group-item"
        >
            {{ task.body }}

            <button v-on="click: toggleTaskCompletion(task)">&#10007;</button>
        </li>
    </ol>

我们在上面用两种体式格局来完成了Vuejs的filter，一个是filterBy true in completed，这是说只需completed属性为true的task，另一个就是inProcess，这个就须要我们本身来完成一下：

data: {
    tasks: [],

    newTask: ''
},

filters: {
        inProcess: function(tasks) {
            return  tasks.filter(function(task){
                    return ! task.completed;
            });
        }
    },

上面的代码就是一个简朴的filter完成，return ! task.completed;的意义是返回task.completed的值为false的task。

这里我们就简朴的完成了完成任务了：