Vue实现push数组并删除方法

<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>