使用Vue写一个新增和修改的界面

当涉及到 Vue 中的新增和修改界面时，按照以下步骤进行操作：

1:创建组件：
创建一个 Vue 组件来表示新增和修改的界面。可以使用单文件组件（.vue 文件）的形式，其中包含模板、脚本和样式。

<template>
  <div>
    <!-- 表单控件和元素 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
    };
  },
  methods: {
    saveData() {
      // 处理保存数据的逻辑
    }
  }
};
</script>

<style>
/* 样式规则 */
</style>

2:设计表单界面：
设计用于新增和修改的表单界面。根据需求，用不同的表单控件（如输入框、下拉列表、复选框等）和布局方式来收集用户输入。

<template>
  <div>
    <h2>{{ mode === 'add' ? '新增' : '修改' }}信息</h2>
    <form @submit.prevent="saveData">
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="formData.name" required>

      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="formData.email" required>

      <!-- 其他表单控件 -->

      <button type="submit">{{ mode === 'add' ? '新增' : '保存' }}</button>
    </form>
  </div>
</template>

3:处理表单数据：
在组件的脚本部分，定义表单数据和相应的保存方法。
使用 data 选项来定义表单数据，以及保存数据的逻辑。

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
        // 其他表单字段
      }
    };
  },
  methods: {
    saveData() {
      // 根据当前的 mode（新增或修改），执行相应的保存逻辑
      if (this.mode === 'add') {
        // 执行新增数据的逻辑
      } else {
        // 执行修改数据的逻辑
      }
    }
  }
};
</script>

4:路由和参数传递：
如果新增和修改界面是通过路由进行导航的，在路由配置中定义相应的路由，并通过路由参数传递数据。

// 路由配置文件
import AddEditPage from './components/AddEditPage.vue';

const routes = [
  { path: '/add', component: AddEditPage, props: { mode: 'add' } },
  { path: '/edit/:id', component: AddEditPage, props: { mode: 'edit' } }
];
vue
Copy
<!-- AddEditPage.vue -->
<template>
  <div>
    <h2>{{ mode === 'add' ? '新增' : '修改' }}信息</h2>
    <!-- 表单内容 -->
  </div>
</template>

<script>
export default {
  props: ['mode'],
  mounted() {
    if (this.mode === 'edit') {
      const id = this.$route.params.id;
      // 根据 ID 请求数据，并将数据填充到表单中
    }
  },
  methods: {
    saveData() {
      if (this.mode === 'add') {
        // 执行新增数据的逻辑
      } else {
        // 执行修改数据的逻辑
      }
    }
  }
};
</script>

用了 Vue Router 来定义了两个路由，分别用于新增和修改界面。
通过设置 props 属性，将 mode 参数传递给了 AddEditPage 组件，并根据 mode 的值来决定界面显示的文本和保存逻辑。