vue 动态生成input进行操作——简单实现添加删除联系人功能

实现类似的如图功能：

代码如下：

<template>
  <div id="app">
    <div v-for="(list, index) in lists" :key="index">
      <ul>
        <li>
          <span>名字</span>
          <input type="text" v-model="list.name" style="width:100px" />
        </li>

        <li>
          <button v-on:click="del(index)">删除联系人</button>
        </li>
      </ul>
    </div>
    <button v-on:click="add">添加联系人</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tables: [],
      lists: []
    };
  },
  methods: {
    add: function() {
      this.lists.push({ name: "" });
      console.log(this.lists);
    },
    del: function(index) {
      this.lists.splice(index, 1);
      console.log(this.lists);
    }
  }
};
</script>