vue实现增删查改

vue实现增删查改的方法

基本结构搭建

使用Vue CLI或直接引入Vue.js创建项目。准备基础模板包含数据列表展示区域和操作按钮区。数据通常存储在组件的data属性中，以数组形式保存。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <input v-model="newItem" placeholder="新增项目"/>
    <button @click="addItem">添加</button>
  </div>
</template>

数据查询展示

在data中定义初始数据数组，使用v-for指令循环渲染列表。通过计算属性可实现筛选查询功能。

data() {
  return {
    items: [
      { id: 1, name: '项目1' },
      { id: 2, name: '项目2' }
    ],
    newItem: ''
  }
}

新增数据实现

通过v-model绑定输入框，在addItem方法中处理新增逻辑。注意数据校验和唯一性检查。

methods: {
  addItem() {
    if(this.newItem.trim()) {
      this.items.push({
        id: Date.now(),
        name: this.newItem
      });
      this.newItem = '';
    }
  }
}

删除数据操作

根据索引或唯一标识删除数组元素，使用数组的splice方法或filter方法。

deleteItem(index) {
  this.items.splice(index, 1);
}

修改数据功能

添加编辑状态标记和修改方法，通过双向绑定实现表单编辑。

<li v-for="(item, index) in items" :key="item.id">
  <span v-if="!item.editing">{{ item.name }}</span>
  <input v-else v-model="item.name" @blur="saveEdit(index)"/>
  <button @click="toggleEdit(index)">编辑</button>
</li>

methods: {
  toggleEdit(index) {
    this.items[index].editing = !this.items[index].editing;
  },
  saveEdit(index) {
    this.items[index].editing = false;
  }
}

与后端API交互

使用axios等库处理HTTP请求，将操作映射到RESTful接口。

import axios from 'axios';

methods: {
  async fetchItems() {
    const res = await axios.get('/api/items');
    this.items = res.data;
  },
  async addItem() {
    await axios.post('/api/items', { name: this.newItem });
    this.fetchItems();
  }
}

完整组件示例

整合所有功能的标准组件示例，包含基本CRUD操作。

<template>
  <div>
    <input v-model="newItem" @keyup.enter="addItem"/>
    <button @click="addItem">添加</button>

    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        <span v-if="!item.editing">{{ item.name }}</span>
        <input v-else v-model="item.name" @blur="saveEdit(item.id)"/>
        <button @click="toggleEdit(item.id)">编辑</button>
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItem: '',
      searchTerm: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.includes(this.searchTerm)
      );
    }
  },
  methods: {
    toggleEdit(id) {
      const item = this.items.find(i => i.id === id);
      item.editing = !item.editing;
    }
  }
}
</script>

状态管理方案

对于复杂应用，建议使用Vuex集中管理状态，确保数据流清晰可追踪。

// store.js
export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  }
})

// 组件中
methods: {
  addItem() {
    this.$store.commit('ADD_ITEM', { 
      id: Date.now(),
      name: this.newItem 
    });
  }
}