vue实现增删改

Vue 实现增删改查功能

在 Vue 中实现增删改查功能通常涉及数据绑定、事件处理和组件通信。以下是实现这些功能的具体方法。

数据初始化

在 Vue 的 data 中初始化一个数组来存储数据，例如一个简单的任务列表：

data() {
  return {
    tasks: [
      { id: 1, name: 'Task 1', completed: false },
      { id: 2, name: 'Task 2', completed: true }
    ],
    newTask: '',
    editingTask: null
  }
}

新增功能

通过输入框绑定 v-model 来捕获用户输入，点击按钮触发新增方法：

<input v-model="newTask" placeholder="Add a new task">
<button @click="addTask">Add Task</button>

在方法中实现新增逻辑：

methods: {
  addTask() {
    if (this.newTask.trim() === '') return;
    this.tasks.push({
      id: Date.now(),
      name: this.newTask,
      completed: false
    });
    this.newTask = '';
  }
}

删除功能

为每个列表项添加删除按钮，通过传递索引或 ID 来删除对应项：

<ul>
  <li v-for="(task, index) in tasks" :key="task.id">
    {{ task.name }}
    <button @click="deleteTask(index)">Delete</button>
  </li>
</ul>

删除方法实现：

deleteTask(index) {
  this.tasks.splice(index, 1);
}

修改功能

进入编辑模式时保存当前编辑的任务，绑定输入框到临时变量：

<li v-for="(task, index) in tasks" :key="task.id">
  <span v-if="editingTask !== task">
    {{ task.name }}
    <button @click="startEditing(task)">Edit</button>
  </span>
  <input v-else v-model="task.name" @blur="finishEditing">
</li>

编辑方法实现：

startEditing(task) {
  this.editingTask = task;
},
finishEditing() {
  this.editingTask = null;
}

查询功能

通过计算属性实现简单的过滤查询：

computed: {
  filteredTasks() {
    return this.tasks.filter(task => task.name.includes(this.searchQuery));
  }
}

在模板中使用：

<input v-model="searchQuery" placeholder="Search tasks">
<ul>
  <li v-for="task in filteredTasks" :key="task.id">
    {{ task.name }}
  </li>
</ul>

完整组件示例

<template>
  <div>
    <input v-model="newTask" placeholder="Add a new task">
    <button @click="addTask">Add Task</button>

    <input v-model="searchQuery" placeholder="Search tasks">

    <ul>
      <li v-for="(task, index) in filteredTasks" :key="task.id">
        <span v-if="editingTask !== task">
          {{ task.name }}
          <button @click="startEditing(task)">Edit</button>
          <button @click="deleteTask(index)">Delete</button>
        </span>
        <input v-else v-model="task.name" @blur="finishEditing">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Task 1', completed: false },
        { id: 2, name: 'Task 2', completed: true }
      ],
      newTask: '',
      editingTask: null,
      searchQuery: ''
    }
  },
  computed: {
    filteredTasks() {
      return this.tasks.filter(task => 
        task.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() === '') return;
      this.tasks.push({
        id: Date.now(),
        name: this.newTask,
        completed: false
      });
      this.newTask = '';
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    },
    startEditing(task) {
      this.editingTask = task;
    },
    finishEditing() {
      this.editingTask = null;
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，建议使用 Vuex 集中管理状态：

// store.js
export default new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    ADD_TASK(state, task) {
      state.tasks.push(task);
    },
    DELETE_TASK(state, index) {
      state.tasks.splice(index, 1);
    },
    UPDATE_TASK(state, { index, task }) {
      state.tasks[index] = task;
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('ADD_TASK', task);
    },
    deleteTask({ commit }, index) {
      commit('DELETE_TASK', index);
    },
    updateTask({ commit }, payload) {
      commit('UPDATE_TASK', payload);
    }
  }
});

在组件中通过 mapActions 使用：

import { mapActions } from 'vuex';

methods: {
  ...mapActions(['addTask', 'deleteTask', 'updateTask']),
  // 其他组件方法
}

注意事项

• 为列表项设置唯一的 key 属性提高渲染性能
• 对于复杂表单验证，可以使用 Vuelidate 等验证库
• 考虑添加防抖处理搜索输入
• 对于大量数据，实现分页功能

以上方法提供了在 Vue 中实现基本增删改查功能的核心实现，可以根据实际需求进行扩展和优化。