vue动态添加行

效果

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>

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>