Vue实现push数组并删除方法

最近在用Vue做评论互动的时候用到了push，因为项目是迭代开发，所以现在做一个简易的demo回顾下

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