为我写一个vue+bomb的增删改查页面

好的，以下是一个简单的vue+bomb增删改查页面示例：

<template>
  <div class="container">
    <h1>Bomb管理</h1>
    <form>
      <label>
        名称：
        <input type="text" v-model="newBomb.name" required>
      </label>
      <label>
        威力：
        <input type="number" v-model.number="newBomb.power" required>
      </label>
      <button type="submit" @click.prevent="addBomb">新增</button>
    </form>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>威力</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="bomb in bombs" :key="bomb.id">
          <td>{{ bomb.id }}</td>
          <td>{{ bomb.name }}</td>
          <td>{{ bomb.power }}</td>
          <td>
            <button @click="editBomb(bomb)">编辑</button>
            <button @click="deleteBomb(bomb.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="editingBomb">
      <h2>编辑Bomb</h2>
      <form>
        <label>
          名称：
          <input type="text" v-model="editingBomb.name" required>
        </label>
        <label>
          威力：
          <input type="number" v-model.number="editingBomb.power" required>
        </label>
        <button @click.prevent="updateBomb">更新</button>
        <button @click.prevent="cancelEdit">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import { createBomb, deleteBomb, getBombs, updateBomb } from '@/api/bombs'

export default {
  data() {
    return {
      bombs: [],
      newBomb: {
        name: '',
        power: 0
      },
      editingBomb: null
    }
  },
  async created() {
    this.bombs = await getBombs()
  },
  methods: {
    async addBomb() {
      const newBomb = await createBomb(this.newBomb)
      this.bombs.push(newBomb)
      this.newBomb = {
        name: '',
        power: 0
      }
    },
    async deleteBomb(id) {
      await deleteBomb(id)
      this.bombs = this.bombs.filter(bomb => bomb.id !== id)
    },
    editBomb(bomb) {
      this.editingBomb = bomb
    },
    async updateBomb() {
      await updateBomb(this.editingBomb.id, this.editingBomb)
      this.editingBomb = null
    },
    cancelEdit() {
      this.editingBomb = null
    }
  }
}
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
tr:hover {
  background-color: #f5f5f5;
}
form {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
label {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
button {
  padding: 8px;
  margin-top: 8px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
button:hover {
  background-color: #3e8e41;
}
</style>

这个页面使用了一个简单的Bomb API，包括获取所有Bomb、创建新的Bomb、更新Bomb和删除Bomb。其中，新增和编辑操作都使用了表单，使用了双向绑定来同步输入框的值和数据中的值。同时，我们也在页面中展示了所有Bomb，并提供了编辑和删除操作。