通用vue编辑按钮和新建按钮事件逻辑

<template>
  <div>
    <!-- 使用v-if来控制按钮的显示 -->
    <button v-if="isEditing" @click="saveChanges">保存</button>
    <button v-if="isEditing" @click="cancelEdit">取消</button>
    <button v-else @click="editItem">编辑</button>
    <button v-else @click="deleteItem">删除</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isEditing: false, // 控制编辑状态
      item: { /* ... */ }, // 需要编辑的数据项
    };
  },
  methods: {
    editItem() {
      this.isEditing = true; // 切换到编辑状态
    },
    saveChanges() {
      // 保存更改的逻辑
      this.isEditing = false; // 切换到非编辑状态
    },
    cancelEdit() {
      // 取消编辑的逻辑
      this.isEditing = false; // 切换到非编辑状态
    },
    deleteItem() {
      // 删除项目的逻辑
    }
  }
};
</script>

这个代码实例展示了如何在Vue组件中使用数据属性isEditing来控制编辑按钮的显示，并处理相关的点击事件。当用户点击编辑按钮时，切换到编辑模式，显示保存和取消按钮。保存或取消操作后，再次切换回非编辑模式。删除操作保持在非编辑模式。