How to implement the add, delete, modify and check functions in Vue

在 Vue.js 中实现增删改查功能：创建：使用 v-model 绑定数据，向服务器发送 POST 请求创建新记录。读取：向服务器发送 GET 请求获取数据。更新：使用 v-model 编辑数据，向服务器发送 PUT 请求更新记录。删除：向服务器发送 DELETE 请求删除记录。

Vue 中实现增删改查功能

增删改查（CRUD）是 Web 应用程序中的基本操作，它可以让我们在数据库中创建、读取、更新和删除数据。在 Vue.js 中实现 CRUD 功能相对简单。

创建

创建新记录时，我们将使用 v-model 双向绑定数据并向服务器发出 POST 请求。例如：

<template>
  <form @submit.prevent="createItem">
    <input v-model="newItem.name" />
    <button type="submit">Create</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '' }
    }
  },
  methods: {
    createItem() {
      // 向服务器发送 POST 请求
      axios.post('/items', this.newItem).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script>

读取

读取数据时，我们将向服务器发出 GET 请求。例如：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    // 在组件挂载时向服务器发送 GET 请求
    axios.get('/items').then((response) => {
      this.items = response.data
    })
  }
}
</script>

更新

更新记录时，我们将使用 v-model 编辑数据并向服务器发出 PUT 请求。例如：

<template>
  <form @submit.prevent="updateItem">
    <input v-model="item.name" />
    <button type="submit">Update</button>
  </form>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    updateItem() {
      // 向服务器发送 PUT 请求
      axios.put(`/items/${this.item.id}`, this.item).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script>

删除

删除记录时，我们将向服务器发出 DELETE 请求。例如：

<template>
  <button @click="deleteItem">Delete</button>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    deleteItem() {
      // 向服务器发送 DELETE 请求
      axios.delete(`/items/${this.item.id}`).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script>

The above is the detailed content of How to implement the add, delete, modify and check functions in Vue. For more information, please follow other related articles on the PHP Chinese website!