vue3增删改查简单实现
时间: 2023-06-29 16:03:01 浏览: 52
Vue3是Vue.js的最新版本,它带来了很多新的特性和改进。在Vue3中,使用Composition API可以更方便地实现增删改查。
下面是一个简单的例子,展示如何使用Vue3 Composition API实现增删改查:
```html
<template>
<div>
<h2>Todo List</h2>
<form @submit.prevent="addTodo">
<input type="text" v-model="newTodo" />
<button type="submit">Add</button>
</form>
<ul>
<li v-for="(todo, index) in todos" :key="todo.id">
{{ todo.title }}
<button @click="deleteTodo(index)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
todos: [
{ id: 1, title: "Learn Vue" },
{ id: 2, title: "Build something cool" },
],
newTodo: "",
});
const addTodo = () => {
state.todos.push({
id: state.todos.length + 1,
title: state.newTodo,
});
state.newTodo = "";
};
const deleteTodo = (index) => {
state.todos.splice(index, 1);
};
return {
todos: state.todos,
newTodo: state.newTodo,
addTodo,
deleteTodo,
};
},
};
</script>
```
在上面的代码中,我们使用了Vue3的`reactive`函数来创建响应式的数据对象`state`。`state`包含了一个数组`todos`和一个字符串`newTodo`,分别表示当前的待办事项列表和用户输入的新待办事项。
我们还定义了两个函数`addTodo`和`deleteTodo`,分别用于添加和删除待办事项。在`addTodo`函数中,我们通过`push`方法向`todos`数组中添加一个新的待办事项,并清空`newTodo`字符串。在`deleteTodo`函数中,我们使用`splice`方法从`todos`数组中删除指定索引的待办事项。
最后,我们在`setup`函数中返回了一个包含了数据和方法的对象,这些数据和方法可以在模板中直接使用。在模板中,我们使用`v-model`指令绑定了用户输入的新待办事项,使用`v-for`指令遍历`todos`数组并显示每个待办事项,使用`@click`指令绑定了删除待办事项的方法。