高手进阶 | Vue数据增删改查入门指南

2023-10-10 13:07:32

数据增删改查的奥妙

数据增删改查（CRUD）是数据管理的核心操作，在Vue中，我们通过特定的方法和技巧来实现对数据的增删改查。

添加数据
首先，让我们从添加数据开始。Vue提供了一种简单的方法来向数组中添加新元素，即使用.push()方法。例如：

// 在名为 'todos' 的数组中添加一个新任务
todos.push({
  id: 4,
  task: '学习 Vue 数据增删改查',
  completed: false
});

删除数据
接下来，我们来看一下如何删除数据。同样地，Vue提供了.splice()方法，允许我们从数组中删除元素。例如：

// 从 'todos' 数组中删除第二个任务
todos.splice(1, 1);

更新数据
更新数据是另一个重要的操作，我们可以在Vue中使用.set()方法来实现。例如：

// 将 'todos' 数组中第一个任务的状态标记为已完成
todos[0].completed = true;

检索数据
最后，我们还需要一种方法来检索数据。Vue提供了多种方法来获取数组中的数据，例如：

// 查找 'todos' 数组中所有已完成的任务
const completedTodos = todos.filter(todo => todo.completed);

实战演练：构建一个任务列表

现在，我们已经了解了Vue中的数据增删改查操作，让我们将这些知识应用到一个实际的项目中。我们将构建一个简单的任务列表，允许用户添加、删除和标记任务完成。

<template>
  <div id="app">
    <h1>任务列表</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed">
        <span>{{ todo.task }}</span>
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
    <input type="text" v-model="newTodo">
    <button @click="addTodo">添加任务</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, task: '学习 Vue', completed: false },
        { id: 2, task: '构建任务列表', completed: false },
        { id: 3, task: '部署项目', completed: false }
      ],
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: this.todos.length + 1,
          task: this.newTodo,
          completed: false
        });
        this.newTodo = '';
      }
    },
    removeTodo(todo) {
      const index = this.todos.indexOf(todo);
      this.todos.splice(index, 1);
    }
  }
};
</script>