Vue实现push数组并删除方法

最新推荐文章于 2025-06-13 09:50:14 发布

原创最新推荐文章于 2025-06-13 09:50:14 发布 · 1.7w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Push

Vue2 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了一种使用Vue.js进行列表数据展示和操作的方法，包括数据的动态添加与删除功能实现。通过具体代码示例，展示了如何利用Vue.js的响应式特性，实现列表项的实时更新，并提供了按钮交互来添加和移除列表项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <ul v-for="(item , index) in list" :key="index">
      <li>
        {{item.serial}}---
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="serial" />
    <input type="button" value="点击添加" @click="getserial" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { serial: 1 },
        { serial: 2 },
        { serial: 3 },
        { serial: 4 },
        { serial: 5 }
      ],
      serial: ""
    };
  },
  methods: {
    getserial() {
      this.list.push({
        serial: this.serial
      });
      this.serial = "";
    },
    //通过索引删除数组
    remove(index) {
      //splice 操作数组的方法
      this.list.splice(index, 1);
    }
  }
};
</script>

<style>
</style>