Vue 中的条件渲染：编辑现有的待办事项

现在我们有了一个可用的 isEditing 标志来表示事项正在被编辑（或者未被编辑）。如果 isEditing 为真，我们会用这个标志来展示我们的 ToDoItemEditForm 而不是复选框。为此，我们将使用另一个 Vue 指令：v-if。

v-if 指令只会在传递给它的值为真的情况下渲染一个块。这和 if 语句在 JavaScript 起作用的方式相似。v-if 也有对应的 v-else-if 和 v-else 指令，在 Vue 模板中提供相当于 JavaScript 的 else if 和 else 逻辑。

需要注意的是，v-else 和 v-else-if 块需要是 v-if/v-else-if 块的第一个兄弟，否则 Vue 将无法识别它们。如果你需要条件渲染整个模板，你也可以将 v-if 添加到 标签上。

最后，由于 Vue 只会在一个事件渲染这些块中的一个，你可以在根组件使用 v-if + v-else 来只显示一个块。我们将在我们的应用程序中这样做，因为这将使我们能够用编辑表单替换显示待办事项的代码。

首先在 ToDoItem 组件的根 元素中添加 v-if="!isEditing" 属性，

接下来，在该 的关闭标签下面添加下面这行：

我们还需要导入和注册 ToDoItemEditForm 组件，这样我才能在这个模板里面使用它。在 元素的顶部添加这行：

在组件对象中 props 属性上方添加一个 components 属性：

现在，如果你打开你的应用程序并点击了一个待办事项的“Edit”按钮，你应该可以看到编辑表单代替了复选框。

然而，目前还没有退出编辑的方法。为了解决这个问题，我们需要在组件中添加一些更多的事件处理器。