vue增删改查功能怎么实现

Vue是一个前端框架，通过Vue可以很方便地实现增删改查功能。下面是一个简单的例子：

首先，定义一个数组用来存储数据：

data () {
  return {
    items: [
      { id: 1, name: 'item1', price: 10 },
      { id: 2, name: 'item2', price: 20 }
    ],
    newItem: { id: null, name: '', price: null },
    editItem: { id: null, name: '', price: null }
  }
}

然后，可以使用v-for指令渲染出数据列表：

<ul>
  <li v-for="item in items">{{ item.name }} - {{ item.price }}</li>
</ul>

接着，编写添加数据的方法：

methods: {
  addItem () {
    this.items.push(this.newItem)
    this.newItem = { id: null, name: '', price: null }
  }
}

在HTML中，可以使用v-model指令将表单元素与组件中的数据绑定起来：

<input type="text" v-model="newItem.name">
<input type="number" v-model="newItem.price">
<button @click="addItem">Add Item</button>

类似地，可以编写删除和更新数据的方法。例如：

methods: {
  deleteItem (item) {
    const index = this.items.indexOf(item)
    this.items.splice(index, 1)
  },

  editItem (item) {
    this.editItem = Object.assign({}, item)
  },

  updateItem () {
    const index = this.items.findIndex(item => item.id === this.editItem.id)
    this.items.splice(index, 1, this.editItem)
    this.editItem = { id: null, name: '', price: null }
  }
}

这些方法可以在HTML中绑定到按钮或表单元素上，例如：

<button @click="deleteItem(item)">Delete</button>
<button @click="editItem(item)">Edit</button>

<input type="text" v-model="editItem.name">
<input type="number" v-model="editItem.price">
<button @click="updateItem">Update</button>

以上是一个简单的增删改查功能的实现。当然，实际项目中可能需要更复杂的逻辑和功能，但是Vue提供了非常方便的工具和语法，可以帮助我们快速实现这些功能。