当前位置：首页 > VUE

vue增删改查简单实现

2026-02-25 14:24:02VUE

实现增删改查的基本结构

使用Vue 3的Composition API配合<script setup>语法

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
])
const newItem = ref('')
const editingId = ref(null)
const editedName = ref('')
</script>

添加功能实现

<template>
  <input v-model="newItem" placeholder="Add new item">
  <button @click="addItem">Add</button>
</template>

<script setup>
const addItem = () => {
  if (newItem.value.trim()) {
    items.value.push({
      id: Date.now(),
      name: newItem.value.trim()
    })
    newItem.value = ''
  }
}
</script>

删除功能实现

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <button @click="deleteItem(item.id)">Delete</button>
    </li>
  </ul>
</template>

<script setup>
const deleteItem = (id) => {
  items.value = items.value.filter(item => item.id !== id)
}
</script>

修改功能实现

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="editingId !== item.id">{{ item.name }}</span>
      <input v-else v-model="editedName">
      <button 
        v-if="editingId !== item.id" 
        @click="startEdit(item)"
      >Edit</button>
      <button 
        v-else 
        @click="saveEdit(item.id)"
      >Save</button>
    </li>
  </ul>
</template>

<script setup>
const startEdit = (item) => {
  editingId.value = item.id
  editedName.value = item.name
}

const saveEdit = (id) => {
  const index = items.value.findIndex(item => item.id === id)
  if (index !== -1) {
    items.value[index].name = editedName.value
  }
  editingId.value = null
}
</script>

查询功能实现

<script setup>
const searchQuery = ref('')

const filteredItems = computed(() => {
  return items.value.filter(item => 
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})
</script>

<template>
  <input v-model="searchQuery" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

完整组件示例

<template>
  <div>
    <h2>CRUD Demo</h2>

    <!-- 添加 -->
    <div>
      <input v-model="newItem" placeholder="Add new item">
      <button @click="addItem">Add</button>
    </div>

    <!-- 搜索 -->
    <div>
      <input v-model="searchQuery" placeholder="Search...">
    </div>

    <!-- 列表展示 -->
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        <span v-if="editingId !== item.id">{{ item.name }}</span>
        <input v-else v-model="editedName">

        <button 
          v-if="editingId !== item.id" 
          @click="startEdit(item)"
        >Edit</button>
        <button 
          v-else 
          @click="saveEdit(item.id)"
        >Save</button>

        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
])
const newItem = ref('')
const editingId = ref(null)
const editedName = ref('')
const searchQuery = ref('')

const filteredItems = computed(() => {
  return items.value.filter(item => 
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const addItem = () => {
  if (newItem.value.trim()) {
    items.value.push({
      id: Date.now(),
      name: newItem.value.trim()
    })
    newItem.value = ''
  }
}

const deleteItem = (id) => {
  items.value = items.value.filter(item => item.id !== id)
}

const startEdit = (item) => {
  editingId.value = item.id
  editedName.value = item.name
}

const saveEdit = (id) => {
  const index = items.value.findIndex(item => item.id === id)
  if (index !== -1) {
    items.value[index].name = editedName.value
  }
  editingId.value = null
}
</script>

vue增删改查简单实现