meilihao/vue动态添加input

## vue动态添加input
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(item, index) in formData" :key="index">
          <input v-model="item.num" />人
          <input v-model="item.money" />元
          <button @click="add">+</button>
          <button @click="del(index)">-</button>
        </li>
      </ul>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        num: 1,
        money: 100,
        formData: [{ num: 1, money: 5 },{ num: 2, money: 7 }]
      },
      methods: {
        add() {
          console.log("add");
          this.formData.push({ num: this.num++, money: this.money++ });
        },
        del(index) {
          this.formData.splice(index, 1);
        }
      }
    });
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
	<div id="app">
	<ul>
	<li v-for="(item, index) in formData" :key="index">
	<input v-model="item.num" />人
	<input v-model="item.money" />元
	<button @click="add">+</button>
	<button @click="del(index)">-</button>
	</li>
	</ul>
	</div>
	</body>
	<script>
	var vm = new Vue({
	el: "#app",
	data: {
	num: 1,
	money: 100,
	formData: [{ num: 1, money: 5 },{ num: 2, money: 7 }]
	},
	methods: {
	add() {
	console.log("add");
	this.formData.push({ num: this.num++, money: this.money++ });
	},
	del(index) {
	this.formData.splice(index, 1);
	}
	}
	});
	</script>
	</html>