vue实现增删改

Vue 实现增删改查功能

数据绑定与初始化

在 Vue 中实现增删改查功能需要先定义数据模型和方法。通过 data 初始化一个数组来存储数据，例如一个简单的待办事项列表：

data() {
  return {
    items: [],
    newItem: '',
    editingIndex: -1,
    tempItem: ''
  }
}

添加功能

使用 v-model 绑定输入框，通过方法将新数据添加到数组：

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

模板部分：

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

删除功能

通过数组的 splice 方法移除指定索引的数据：

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

模板中使用 v-for 渲染列表并绑定删除事件：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item }} 
    <button @click="deleteItem(index)">删除</button>
  </li>
</ul>

修改功能

修改需要先进入编辑状态，保存修改后的值：

editItem(index) {
  this.editingIndex = index;
  this.tempItem = this.items[index];
},
saveEdit() {
  if (this.tempItem.trim()) {
    this.items.splice(this.editingIndex, 1, this.tempItem.trim());
    this.cancelEdit();
  }
},
cancelEdit() {
  this.editingIndex = -1;
  this.tempItem = '';
}

模板中根据编辑状态显示不同内容：

<li v-for="(item, index) in items" :key="index">
  <span v-if="editingIndex !== index">{{ item }}</span>
  <input v-else v-model="tempItem">
  <button v-if="editingIndex !== index" @click="editItem(index)">编辑</button>
  <button v-else @click="saveEdit">保存</button>
  <button v-if="editingIndex === index" @click="cancelEdit">取消</button>
</li>

查询功能

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

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

添加搜索输入框：

<input v-model="searchQuery" placeholder="搜索...">
<ul>
  <li v-for="(item, index) in filteredItems" :key="index">
    <!-- 列表内容 -->
  </li>
</ul>

完整示例组件

<template>
  <div>
    <input v-model="newItem" @keyup.enter="addItem">
    <button @click="addItem">添加</button>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">
        <span v-if="editingIndex !== index">{{ item }}</span>
        <input v-else v-model="tempItem">
        <button v-if="editingIndex !== index" @click="editItem(index)">编辑</button>
        <button v-else @click="saveEdit">保存</button>
        <button v-if="editingIndex === index" @click="cancelEdit">取消</button>
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItem: '',
      searchQuery: '',
      editingIndex: -1,
      tempItem: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem.trim());
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
    editItem(index) {
      this.editingIndex = index;
      this.tempItem = this.items[index];
    },
    saveEdit() {
      if (this.tempItem.trim()) {
        this.items.splice(this.editingIndex, 1, this.tempItem.trim());
        this.cancelEdit();
      }
    },
    cancelEdit() {
      this.editingIndex = -1;
      this.tempItem = '';
    }
  }
}
</script>