各位学习vue的同学们经常遇到vue动态添加行的问题，今天就给大家详细来说一说，直接上代码：
1，html
<div id="app">
<div @click="addData">点击添加行</div>
<div class="box1">
<table>
<tr>
<th width="10%">序号</th>
<th width="25%">姓名</th>
<th width="25%">性别</th>
<th width="25%">联系方式</th>
<th width="25%"></th>
</tr>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td><input type="text" v-model="item.name"></td>
<td><input type="text" v-model="item.gender"></td>
<td><input type="text" v-model="item.contact"></td>
<td @click="deletData(index)">删除</td>
</tr>
</table>
</div>
2，js
<script>
new Vue({
el: "#app",
data: function () {
return {
list: []
}
},
methods: {
addData: function () {
this.list.push({
name: '',
gender: '',
contact: ''
})
},
deletData:function(index){
this.list.splice(index,1)
}
}
})
</script>
好啦，以上就是关于vue动态添加行的全部内容，各位同学学会了吗，还有问题的同学可以评论区留言哦~