new Vue({ el: "#app", data: { items: [{ name: '', adds: '', tel: '', }] }, methods: { del: function(index) { this.items.splice(index, 1); this.geLength(); }, add: function(index) { this.items.splice(index+1, 0, { name: '', adds: '', tel: '', }); console.log(this.items) this.geLength(); }, geLength: function() { this.len = this.items.length - 1; } }, created: function() { this.geLength(); } })
body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); }
<div id="app"> <div class="main" v-for="(item, index) in items" :key="index"> <div class="main-name"> <input type="text" v-model="item.name"> </div> <div class="main-adds"> <input type="text" v-model="item.adds"> </div> <div class="main-tel"> <input type="text" v-model="item.tel"> </div> <div class="main-btn"> <button @click="add(index)" v-if="index===len">O</button> <button @click="del(index)" v-else>X</button> </div> </div> </div>