当前位置：首页 > VUE

vue实现删除选项

2026-03-08 11:25:02VUE

使用 Vue 实现删除选项

方法一：使用 v-for 和 splice

在 Vue 中，可以通过 v-for 渲染列表，并使用 splice 方法删除特定项。

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

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

方法二：使用 filter 方法

另一种方法是使用 filter 方法，通过条件筛选排除要删除的项。

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

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    deleteItem(item) {
      this.items = this.items.filter(i => i !== item)
    }
  }
}
</script>

方法三：结合 Vuex 管理状态

如果项目使用 Vuex 进行状态管理，可以在 store 中定义删除逻辑。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: ['选项1', '选项2', '选项3']
  },
  mutations: {
    deleteItem(state, index) {
      state.items.splice(index, 1)
    }
  }
})

在组件中调用：

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

<script>
export default {
  methods: {
    deleteItem(index) {
      this.$store.commit('deleteItem', index)
    }
  }
}
</script>

方法四：使用事件总线

对于小型项目，可以使用事件总线实现跨组件删除。

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

在组件中触发和监听事件：

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

<script>
import { EventBus } from './eventBus'

export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3']
    }
  },
  created() {
    EventBus.$on('deleteItem', this.handleDelete)
  },
  methods: {
    emitDelete(index) {
      EventBus.$emit('deleteItem', index)
    },
    handleDelete(index) {
      this.items.splice(index, 1)
    }
  },
  beforeDestroy() {
    EventBus.$off('deleteItem', this.handleDelete)
  }
}
</script>

注意事项

vue实现删除选项