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

本文主要是介绍永远不要眼高手低，Vue完整实现一套简单的增删改查CURD操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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; //查找出最大的idconsole.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>

复制代码