添加任务表单是主页上的一个可隐藏模块使用v-show指令实现主页上的添加任务表单隐藏与显示。使用v-on指令为右上角按钮绑定响应函数可控制添加任务表单的显示与隐藏。使用v-bind指令为右上角按钮设置动态样式：在添加任务表单隐藏状态下显示为绿色按钮按钮内文字为添加；在添加任务表单显示状态下显示为红色按钮按钮内文字为取消

。

示例代码如下：

<template>
  <div>
    <button
      class="btn"
      :class="{ green: !showForm, red: showForm }"
      @click="toggleForm"
    >
      {{ showForm ? '取消' : '添加' }}
    </button>
    <form v-show="showForm">
      <!-- 表单内容 -->
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showForm: false,
    };
  },
  methods: {
    toggleForm() {
      this.showForm = !this.showForm;
    },
  },
};
</script>

<style>
.btn {
  border: none;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}
</style>