原生js实现form表单保存按钮触发后表单只读以及编辑按钮灰化，编辑按钮触发后表单是编辑状态以及保存按钮灰化

一、问题场景？

原生js实现form表单保存按钮触发后表单只读以及编辑按钮灰化，编辑按钮触发后表单是编辑状态以及保存按钮灰化

场景1：初始化进去的时候，编辑灰化，保存高亮，表单为编辑状态

场景2：填写完数据后，点击保存，保存会话，编辑高亮，表单为只读状态

场景3：点击编辑，此时编辑灰化，保存高亮，表单为编辑状态

二、方案以及代码

1.在input设置disable属性，用来控制只读以及编辑状态

 

     保存
     编辑
 

 data() {
      return {
            isEdit: true;// 初始化可以编辑
        }
    }
 computed:{
        // 计算状态
        editDisabled() {
              if (this.isEdit === true) {
                return false;
              }
              return true;
        }
    },

  methods: {
    // 点击保存按钮后,保存灰化，编辑高亮，表单是只读状态
      Importedsave(e) {
          if(this.isEdit === false) {
              return;
          }
          this.isEdit = false;
      },
    // 点击编辑按钮，编辑灰化，保存高亮，表单是编辑状态
      Importededit() {
           if(this.isEdit === true) {
              return;
          }
           this.isEdit = true;
      }
    }

就可以实现啦