vue怎么做表格新增一行

请问点击按钮新建一行，里面的数据自己输入，怎么做（vue）
急，求解答，初学不懂怎么搞

大概写了个示例


<div id="app" style="width:800px;margin:0 auto;text-align:center">
    <input type="button" value="新建" v-on:click="addItem"/><br /><br />
    <table border="1" width="100%">
        <tr><td>姓名</td><td>年龄</td><td>性别</td><td>学号</td><td>删除</td></tr>
        <tr v-for="(item,index) in list">
            <td><input type="text" v-model="item.name" /></td>
            <td><input type="text" v-model="item.age" /></td>
            <td><input type="text" v-model="item.sex" /></td>
            <td><input type="text" v-model="item.no" /></td>
            <td><a v-on:click="del(index)">删除</a></td>
        </tr>
    </table>
    list数据：{{list}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue=new Vue({
        el: '#app',
        data: { list: [] },
        methods: {
            addItem() {
                this.list.push({})
            },
            del(index) {
                this.list.splice(index, 1);
            }
        }
    })
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~

如果是接口，就先做请求拿到数据，把数据放到data里面的新建数组里；如果是拿本地存储根据存储类型拿到数据；
然后将数组遍历到vue组件中，给按钮绑定个方法，然后输入数据，如果有接口通过接口传回到后端数据库，没有就传到本地存储，然后给新建的数组绑定watch事件，只要数据发生变化就做一次存储

先用1个数组绑定表格显示。数组里的元素就是学生对象，包含姓名、年龄、性别、学号。vue相关指令：v-for
新增加数据，就有一个表单，提交后，push到上面的数组。这样表格就是会直接显示。
如果调用服务端接口，可以在 onMounted 的时候处理，获取到服务端数据后，就遍历push到第1步的数组就可以了。

我给个相关的伪代码参考下：

<div id="app">
    <ul>
        <li v-for="(item, index) in films">{{index}} - {{ item.name }}， {{ item.year }}播出</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            films: [
                {name: "速度与激情1", year: 2001}, 
                {name: "速度与激情2", year: 2003}, 
                {name: "速度与激情3", year: 2006}, 
                {name: "速度与激情4", year: 2009}, 
                {name: "速度与激情5", year: 2011}, 
                {name: "速度与激情6", year: 2013}, 
                {name: "速度与激情7", year: 2015}, 
                {name: "速度与激情8", year: 2017}
            ]
        }
    });
</script>

其实就是v-for和push的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click='add'>add</button>
        <table  border="1">
            <tr>
                <th>第一行第一列</th>
                <th>第一行第二列</th>
            </tr>
            <tr v-for="(item, index) in list">
                <td>{{item.id}} </td>
                <td>{{ item.name }}</td>
    
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                list: [
                ]
            },
            methods:{
                add(){
                    var i= this.list.length+1
                    this.list.push({id:i,name: "我是"+ i})
                }
            }
        });
    </script>
</body>
</html>