有了之前的基础，删除 todo 的功能变得易如反掌，我们只需要监听用户点击删除按钮的事件，绑定一个删除 todo 的方法，将当前需要删除的 todo传给 vue，vue 就知道我们要删除哪个 todo了。

<ul>
    <li v-for='todo in todos' :key='todo.id'>
        ...
        <input type="button" value="删除" @click="removeTodo(todo)">
        ...
    </li>
</ul>
...
<script>
    let id = 0; // 用于 id 生成
    var app = new Vue({
        ...
        methods: {
            ...
            removeTodo: function (todo) {
                this.todos.splice(this.todos.indexOf(todo), 1)
            }
        }
    })
</script>

这里用到两个 JavaScript 数组的相关方法，this.todos.indexOf(todo) 用来定位元素的位置，然后我们删除掉这个位置的元素 splice(index, 1)，1 表示只删除一个，即当前位置（index 的值）的元素。

由于 todos 是一个数组，所以我们这里将大量涉及 js 的数组操作，不妨浏览一下 js 数组都有哪些方法可以为我们所用。

练习

练习一：我们现在的删除操作非常粗暴，只要一点击 todo 就彻底消失了。能否温和一点，让用户点击删除时并非真正地删除，而是弹出一个提示框，提示用户确定删除这个 todo 么？用户可以确认也可以取消。

练习二：还有一种温和的删除方式，用户点击删除不会提示，但是删除后会出现一个撤销按钮，允许用户撤销当前的删除操作，点击撤销后之前删除的 todo 又回来了。

更进一步，我们为用户提供一个回收站功能，里面记录用户的全部已删除 todo，用户可以还原删除的 todo。（hint：这个功能等讲到我们实现 todo 的筛选后就知道如何做了，目前不妨先思考一下。）

-- EOF --