当涉及到 Vue 中的新增和修改界面时，按照以下步骤进行操作：
1:创建组件： 创建一个 Vue 组件来表示新增和修改的界面。可以使用单文件组件（.vue 文件）的形式，其中包含模板、脚本和样式。
代码语言：javascript复制<template>
<div>
<!-- 表单控件和元素 -->
</div>
</template>
<script>
export default {
data() {
return {
// 表单数据
};
},
methods: {
saveData() {
// 处理保存数据的逻辑
}
}
};
</script>
<style>
/* 样式规则 */
</style>2:设计表单界面： 设计用于新增和修改的表单界面。根据需求，用不同的表单控件（如输入框、下拉列表、复选框等）和布局方式来收集用户输入。
代码语言：javascript复制<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 选项来定义表单数据，以及保存数据的逻辑。
代码语言：javascript复制<script>
export default {
data() {
return {
formData: {
name: '',
email: ''
// 其他表单字段
}
};
},
methods: {
saveData() {
// 根据当前的 mode（新增或修改），执行相应的保存逻辑
if (this.mode === 'add') {
// 执行新增数据的逻辑
} else {
// 执行修改数据的逻辑
}
}
}
};
</script>4:路由和参数传递： 如果新增和修改界面是通过路由进行导航的，在路由配置中定义相应的路由，并通过路由参数传递数据。
代码语言：javascript复制// 路由配置文件
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 的值来决定界面显示的文本和保存逻辑。
