vue3 splice

// 使用 Vue 3 和 splice 方法的示例代码

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

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

export default {
  setup() {
    // 定义一个响应式数组
    const items = ref(['苹果', '香蕉', '橙子', '葡萄']);

    // 定义一个方法来移除数组中的第一个元素
    const removeItem = () => {
      // 使用 splice 方法移除第一个元素
      items.value.splice(0, 1);
    };

    return {
      items,
      removeItem,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

• items 是一个使用 ref 创建的响应式数组。
• splice 方法用于修改数组内容。在这个例子中，它被用来移除数组的第一个元素（索引为 0）。
• v-for 指令用于遍历 items 数组，并在模板中显示每个元素。
• @click 事件绑定到按钮上，点击按钮时会调用 removeItem 方法，从而移除数组的第一个元素。