Vue删除数组第一个元素|极客教程

Vue删除数组第一个元素

在Vue中，我们经常需要对数据进行增删改操作。当我们需要删除数组的第一个元素时，可以通过一些简单的方法来实现。在本文中，将详细介绍如何在Vue中删除数组的第一个元素。

方法一：使用JavaScript的shift方法

JavaScript中的shift方法可以用于删除数组的第一个元素，并返回删除的元素。我们可以将这个方法结合Vue中的操作来实现删除数组的第一个元素。

<template>
  <div>
    <button @click="deleteFirstElement">删除第一个元素</button>
    <ul>
      <li v-for="(item, index) in array" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    deleteFirstElement() {
      this.array.shift();
    }
  }
}
</script>

运行结果：当点击”删除第一个元素”按钮时，数组中的第一个元素将被删除，并且界面上的列表会实时更新显示删除后的数组。

方法二：使用Vue的splice方法

除了使用JavaScript的shift方法外，我们还可以使用Vue提供的splice方法来删除数组中的元素。splice方法可以根据索引位置来删除数组中的元素，并返回被删除的元素。

<template>
  <div>
    <button @click="deleteFirstElement">删除第一个元素</button>
    <ul>
      <li v-for="(item, index) in array" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    deleteFirstElement() {
      this.array.splice(0, 1);
    }
  }
}
</script>

运行结果：同样地，当点击”删除第一个元素”按钮时，数组中的第一个元素将被删除，并且界面上的列表会实时更新显示删除后的数组。