vue3。0增删改查简单实现

Vue.js是一个流行的JavaScript前端框架，可以用于开发交互式网站。Vue 3.0是Vue.js的最新版本，引入了许多新特性和功能，用于提高开发效率和性能，同时也提供了更多的方法来实现增删改查。

在Vue 3.0中实现增删改查可以通过利用Vue.js的数据绑定和组件化功能来实现。首先，需要将数据绑定到组件中，然后使用指令和方法来操作数据。

1. 实现增加

可以通过在模板中使用v-model指令将表单元素绑定到数据变量中，如：

<input type="text" v-model="newItem">
<button @click="addItem()">Add</button>

然后，在组件中定义方法来实现添加操作。方法接收表单元素的值作为参数，并将这个值添加到数据数组中，如：

methods: {
    addItem() {
        this.items.push(this.newItem);
        this.newItem = '';
    }
}

2. 实现删除

可以使用v-for指令在模板中遍历数据，如：

<li v-for="(item, index) in items" :key="index">
    {{ item }}
    <button @click="removeItem(index)">Remove</button>
</li>

然后，在组件中定义一个方法来移除指定索引位置的元素，如：

methods: {
    removeItem(index) {
        this.items.splice(index, 1);
    }
}

3. 实现编辑

可以使用v-model指令将数据绑定到表单上，如：

<li v-for="(item, index) in items" :key="index">
    <input type="text" v-model="item">
    <button @click="saveItem(index)">Save</button>
</li>

然后，在组件中定义一个方法来保存编辑后的内容，如：

methods: {
    saveItem(index) {
        this.items[index] = this.items[index];
    }
}

4. 实现查询

可以通过v-model指令将搜索框绑定到数据变量上，如：

<input type="text" v-model="search">

然后，在组件中使用computed计算属性来进行过滤操作，如：

computed: {
    filteredItems() {
        return this.items.filter(item => item.includes(this.search));
    }
}

这样就实现了增删改查的简单实现。需要注意的是，在Vue 3.0中，一些API已经被废弃或者变更，需要查阅Vue.js官方文档以获取准确的用法及语法。