vue动态添加行，直接上代码！

    各位学习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动态添加行的全部内容，各位同学学会了吗，还有问题的同学可以评论区留言哦~