Vue.js 用户信息管理系统 - 添加、编辑、删除功能实现 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 用户信息管理系统</title>
    <script src="vue.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
<pre><code>    table,
    .box {
        width: 80%;
        border: 1px solid blue;
        border-collapse: collapse;
        margin: 20px auto;
    }

    caption {
        font-size: 24px;
        height: 50px;
        line-height: 50px;
    }

    td,
    th {
        height: 40px;
        line-height: 40px;
        border: 1px solid blue;
        width: 13%;
        text-align: center;
    }

    div {
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
    }

    .title {
        font-size: 20px;
        text-align: center;
    }

    input[type=&quot;text&quot;] {
        width: 40px;
        height: 30px;
        padding-left: 30px;
    }

    .formButton {
        width: 150px;
        height: 40px;
        display: block;
        border-radius: 30px;
        margin: 20px auto 20px;
        background: linear-gradient(to right, yellow, #f60);
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="app">
        <table @click="operation($event)">
            <caption>用户信息表</caption>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>邮箱地址</th>
                <th>密码</th>
                <th>操作1</th>
                <th>操作2</th>
            </tr>
            <tr v-for="(user, index) in users" :key="index">
                <td v-for="value in user">{{ value }}</td>
                <td><button type="button" :data-index="index">编辑</button></td>
                <td><input type="button" :data-index="index" value="删除" class="del"></td>
            </tr>
        </table>
        <div style="height: auto; overflow: hidden;" class="box">
            <div v-show="!isShow" class="title">编辑表单</div>
            <div v-show="isShow" class="title">添加表单</div>
            <div>姓名 <input type="text" v-model="user.username"></div>
            <div>手机号码: <input type="text" v-model="user.userphone"></div>
            <div>邮箱地址: <input type="text" v-model="user.useremail"></div>
            <div>密码: <input type="text" v-model="user.userpass"></div>
            <div>
                <button class="formButton" v-if="!isShow" @click="editUser">编辑</button>
                <button class="formButton" v-if="isShow" @click="addUser">添加</button>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: true,
                user: {
                    username: "",
                    userphone: "",
                    useremail: "",
                    userpass: ""
                },
                users: [
                    {
                        uid: "1",
                        username: "李宁",
                        userphone: "15135176666",
                        useremail: "lining@126.com",
                        userpass: "123456"
                    }
                ]
            },
            methods: {
                operation(event) {
                    if (event.target.nodeName.toLowerCase() === "button") {
                        this.user = this.users[event.target.dataset.index];
                        this.isShow = false;
                    } else if (event.target.nodeName.toLowerCase() === "input") {
                        this.users.splice(event.target.dataset.index, 1);
                    }
                },
                addUser() {
                    if (
                        this.user.username !== "" &&
                        this.user.userphone !== "" &&
                        this.user.useremail !== "" &&
                        this.user.userpass !== ""
                    ) {
                        this.user.uid = String(parseInt(this.users[this.users.length - 1].uid) + 1);
                        this.users.push(this.user);
                        this.user = {
                            username: "",
                            userphone: "",
                            useremail: "",
                            userpass: ""
                        };
                        alert("添加成功！");
                    } else {
                        alert("请填全数据！");
                    }
                },
                editUser() {
                    if (
                        this.user.username !== "" &&
                        this.user.userphone !== "" &&
                        this.user.useremail !== "" &&
                        this.user.userpass !== ""
                    ) {
                        this.users.splice(this.index, 1, this.user);
                        this.user = {
                            username: "",
                            userphone: "",
                            useremail: "",
                            userpass: ""
                        };
                        alert("修改成功！");
                        this.isShow = true;
                    } else {
                        alert("请填全数据！");
                    }
                }
            }
        });
    </script>
</body>
</html>