目录

问题描述：

解决方案：

1.方案一

2.方案二

3.方案三

问题描述：

一个表单用vue的事件实现当点击编辑按钮(或图标)出现保存按钮，当要编辑的时候只出现编辑按钮，此时保存按钮隐藏

解决方案：

1.方案一

可以使用Vue中的v-if和v-show指令来控制按钮的显示和隐藏。

1. v-if会完全销毁和重新创建DOM元素
2. v-show只是控制元素的显示和隐藏。

以下是一个简单的示例代码，用于根据按钮的状态显示不同的按钮：

在上面的代码中，使用了一个布尔值editing来表示当前表单是否处于编辑状态。

当editing为false时，显示"Edit"按钮。当editing为true时，显示"Save"按钮。

在startEditing()方法中，可以将editing设置为true，以便在下次渲染时显示"Save"按钮。在saveChanges()方法中，可以执行保存表单数据的操作，并将editing设置为false，以便在下次渲染时显示"Edit"按钮。

在编辑表单中，可以使用v-show指令来根据editing的状态显示或隐藏表单元素，例如：

在这个示例中，当editing为true时，表单会显示出来；当editing为false时，表单会隐藏起来。

2.方案二

可以使用Vue的条件渲染指令v-if和v-show来实现这个功能。

假设你的编辑按钮和保存按钮是两个不同的组件，并且您需要在两个组件之间传递状态，就可以使用Vue的事件系统来实现。

例如，当点击编辑按钮时，触发一个事件，将状态传递给父组件，父组件根据状态来显示或隐藏保存按钮。

以下是一个示例代码，演示了如何使用Vue的事件系统和条件渲染指令来实现这个功能。

 在这个示例代码中，当编辑按钮组件被点击时，会触发一个名为 edit-clicked 的事件，并调用 showSaveButton 方法。

在 showSaveButton 方法中，将 showSaveButton 的值设置为 true，这样保存按钮组件就会显示出来。

保存按钮组件使用 v-if 条件渲染指令来根据 showSaveButton 的值来显示或隐藏。

3.方案三

可以使用Vue的条件渲染指令v-if和v-show来控制编辑和保存按钮的显示和隐藏。

首先，在你的Vue组件中创建一个布尔类型的data属性，用于控制编辑和保存按钮的显示和隐藏：

data() {return {isEditing: false}
}

然后，在模板中使用v-if和v-show指令来控制按钮的显示和隐藏。

当isEditing为true时，显示保存按钮，否则显示编辑按钮：

这样，当你点击编辑按钮时，它将触发@click事件，将isEditing设置为true，然后保存按钮将显示。

当你点击保存按钮时，它将触发@click事件，将isEditing设置为false，然后编辑按钮将再次显示。

注意，使用v-if指令可以完全从DOM中移除元素，而v-show指令仅仅是设置CSS的display属性为none，所以在这种情况下，建议使用v-show指令，因为它可以避免重新渲染DOM元素，提高性能。