vue表单增删改查且不用弹窗代码

Vue 表单的增删改查操作通常涉及到前端的数据管理以及与后端API的交互。下面是一个简单的例子，展示如何在 Vue 中处理这些基本操作，我们假设你已经有了 Axios 或者其他的 HTTP 库来发送 AJAX 请求。

首先，你需要在组件中设置状态（state），比如一个数组来存储数据：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span @click="edit(item)">编辑</span> |
        <span @click="deleteItem(item)">删除</span>
      </li>
    </ul>
    <form @submit.prevent="createOrUpdate">
      <!-- 表单输入字段 -->
      <input v-model="newItem.name" />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItem: {},
    };
  },
  methods: {
    createOrUpdate() {
      if (this.newItem.id) { // 更新已有记录
        this.$http.put('/api/items', this.newItem)
          .then(response => {
            this.items = [...this.items, response.data];
            this.newItem = {}; // 清空新项
          });
      } else { // 添加新记录
        this.$http.post('/api/items', this.newItem)
          .then(response => {
            this.items.push(response.data);
            this.newItem = {}; // 清空新项
          });
      }
    },
    deleteItem(item) {
      this.$http.delete(`/api/items/${item.id}`)
        .then(() => {
          this.items = this.items.filter(i => i.id !== item.id);
        });
    },
    edit(item) {
      this.newItem = { ...item }; // 复制当前项到新项
    },
  },
};
</script>

在这个例子中，`createOrUpdate` 方法用于提交表单（创建或更新），`deleteItem` 删除指定的项目，`edit` 复制选中的项目到 `newItem` 对象以便编辑。请注意这只是一个基础示例，实际应用可能需要处理更多边界情况、错误处理和验证等细节。