永远不要眼高手低，Vue完整实现一套简单的增删改查CURD操作

本文通过一个实际的HTML代码示例，展示了如何在Vue.js中实现文本输入框、编辑和删除功能。代码包括了数据绑定、事件监听以及数据操作的方法，如`edit`和`deleteSoft`，用于获取和更新表格数据。文章强调动手实践的重要性，以加深对编程细节的理解。

摘要由CSDN通过智能技术生成

1: 永远不要眼高手低，看起来很简单，但是你从来没有去动手试一下，就不知道其中真正需要注意的许多细节，

2：完整code如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <div>
            <p><label for="inputid"><input type="text"   v-model="inputid" v-bind:disabled="disableflag!=0"></label></p>
            <p><label for="inputname"><input type="text"   v-model="inputname"></label></p>
            <p><button v-on:click="submitbtn">操作按钮</button></p>
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in historys" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.cdate}}</td>
                    <td><a href="javascript:;" v-on:click.prevent="edit(item.id)">编辑{{item.id}}</a> | <a href="javascript:;" v-on:click.prevent="deleteSoft(item.id,index)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                inputid: "",
                inputname: "",
                disableflag: 0,
                addorEdit: false,
                historys: [{
                    id: 1,
                    name: "三国演义",
                    cdate: "1881-01-10"
                }, {
                    id: 2,
                    name: "水浒传",
                    cdate: "1891-11-21"
                }, {
                    id: 3,
                    name: "聊斋异志",
                    cdate: "1895-2-13"
                }, {
                    id: 4,
                    name: "大宋提刑官",
                    cdate: "1899-01-18"
                }]
            },
            methods: {
                edit: function(id) { //点击编辑获取该行的数据
                    var getone = this.historys.filter(function(item) {
                        return item.id == id;
                    })[0];
                    console.log(getone.id + ",name=" + getone.name);
                    this.inputid = getone.id;
                    this.inputname = getone.name;
                    this.disableflag = 1;
                    this.addorEdit = true;
                },
                deleteSoft: (id, index) => { //splice删除操作
                    console.log(this); //windows对象
                    console.log("index=" + index);
                    var getone = this.app.historys.filter(function(item) {
                        return item.id == id;
                    });
                    var getfindIndex = this.app.historys.findIndex(function(item) { //也可以这样来找到索引
                        return item.id == id;
                    });
                    console.log("getfindIndex=" + getfindIndex); //
                    console.log(getone[0].id + ",name=" + getone[0].name);
                    this.app.historys.splice(index, 1); //在数据中的第几个索引开始删除几个
                    console.log("删除成功");
                },
                submitbtn: function() {
                    console.log(this);
                    var getinputid = this.inputid;
                    var getinputname = this.inputname;

                    console.log(getinputid + "," + getinputname);
                    this.disableflag = 0;
                    if (this.addorEdit) { //编辑
                        if (this.isEmptyorNull(getinputid) || this.isEmptyorNull(getinputname)) {
                            alert("id和名称不可以为空");
                            return;
                        }
                        var geteditobj = this.historys.filter(function(item) {
                            return item.id == getinputid;
                        });
                        geteditobj[0].name = getinputname; //这里需要加上下标
                        console.log("编辑成功");
                        this.inputid = "";
                        this.inputname = "";
                    } else {
                        if (this.isEmptyorNull(getinputname)) {
                            alert("名称不可以为空");
                            return;
                        }
                        var listid = [];
                        this.historys.forEach(function(item) {
                            listid.push(item.id);
                        })
                        var getMaxid = Math.max(...listid) + 1; //查找出最大的id
                        console.log("getMaxid:" + getMaxid);
                        this.historys.push({
                            id: getMaxid,
                            name: getinputname,
                            cdate: "1998-10-12"
                        });
                        console.log("新增成功");
                    }
                    this.addorEdit = false;
                },
                isEmptyorNull: function(str) {
                    if (str == "" || str == "undefined" || str == null) {
                        return true;
                    }
                    return false;
                }
            }

        })
    </script>
</body>

</html>

复制代码