vue的新增与删除

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

 

html：

<template>
  <el-main>
    <el-col :span="24" class="warp-main" v-loading="">
      <el-form :inline="true" class="demo-form-inline" v-for="(item, i) in FormArr" :key="i">
        <el-form-item label="样例">
          <el-input v-model="item.value"></el-input>
        </el-form-item>
        <el-button type="primary" @click="Delete(item.index)">删除</el-button>
      </el-form>
      <el-button type="primary" @click="AddForm">增加更多</el-button>
    </el-col>
  </el-main>
</template>

逻辑：

<script>
export default {
  data () {
    return {
      FormArr: [
        {
          index: 0,
          value: ''
        }
      ]
    }
  },
  methods: {
    AddForm () {
      this.FormArr.push({
        index: this.FormArr.length,
        value: ''
      })
      console.log(this.FormArr)
    },
    Delete (index) {
      this.FormArr.splice(index, 1)
      for (let i in this.FormArr) {
        this.FormArr[i].index = i
      }
    }
  }
}
</script>

注释：

1.通过对数组的操作，进行添加和删除；

2.这里应注意index这个索引，用于删除时，知道删的是哪一个值；

3.删完对应的值，要对数组的index这个索引重组，否则再删除时会出错；