vue 删除指定元素

作者：农村混血兒发布日期:2025-10-23 浏览:66

// 在 Vue 中删除指定元素的示例代码

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '葡萄']
    };
  },
  methods: {
    removeItem(index) {
      // 使用 splice 方法删除指定索引的元素
      this.items.splice(index, 1);
    }
  }
};
</script>

解释说明：

v-for 指令用于遍历 items 数组，并为每个元素生成一个 <li> 列表项。
每个列表项中包含一个按钮，点击按钮时会触发 removeItem 方法，并传入当前元素的索引。
removeItem 方法使用 splice 方法从数组中删除指定索引的元素。splice(index, 1) 表示从 index 位置开始删除一个元素。

上一篇：vue3 select

下一篇：vue span