学习笔记——设置动态表格（添加、删除记录）

2022-10-27

实验结果：

 

 

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" align="center" width="300px">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr v-for="(user,index) in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
                <td>
                    <input type="button" value="删除" @click="deleteUser(index)">
                </td>
            </tr>
        </table>
        <table align="center">
            <tr>
                <td>编号：</td>
                <td><input type="text" v-model="user.id"></td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input type="text" v-model="user.name"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="text" v-model="user.gender"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="添加" @click="addUser">
                </td>

            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                user:{
                    id:"",
                    name:"",
                    gender:"",
                },
                userList:[
                    {id:101,name:"张三",gender:"男"},
                    {id:102,name:"李四",gender:"男"},
                    {id:103,name:"王五",gender:"男"},
                ]
            },
            methods:{
                addUser:function(){
                    //1.将用户输入的数据变为User对象
                    //2.将User对象添加
                    this.userList.push(this.user);
                    //3.添加之后要把内容复空
                    this.user={}
                },
                deleteUser:function(i){
                    this.userList.splice(i,1);
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2022-10-27 18:54  努力是一种常态  阅读(135)  评论(0)    收藏  举报