永远不要眼高手低，Vue完整实现一套简单的增删改查CURD操作
1: 永远不要眼高手低，看起来很简单，但是你从来没有去动手试一下，就不知道其中真正需要注意的许多细节，
2：完整code如下：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="../node_modules/vue/dist/vue.js"></script>
9
10 </head>
11
12 <body>
13 <div id="app">
14 <div>
15 <p><label for="inputid"><input type="text" v-model="inputid" v-bind:disabled="disableflag!=0"></label></p>
16 <p><label for="inputname"><input type="text" v-model="inputname"></label></p>
17 <p><button v-on:click="submitbtn">操作按钮</button></p>
18 </div>
19 <table border="1">
20 <thead>
21 <tr>
22 <th>编号</th>
23 <th>姓名</th>
24 <th>时间</th>
25 <th>操作</th>
26 </tr>
27 </thead>
28 <tbody>
29 <tr v-for="(item,index) in historys" :key="item.id">
30 <td>{{item.id}}</td>
31 <td>{{item.name}}</td>
32 <td>{{item.cdate}}</td>
33 <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>
34 </tr>
35 </tbody>
36 </table>
37 </div>
38
39 <script>
40 var app = new Vue({
41 el: "#app",
42 data: {
43 inputid: "",
44 inputname: "",
45 disableflag: 0,
46 addorEdit: false,
47 historys: [{
48 id: 1,
49 name: "三国演义",
50 cdate: "1881-01-10"
51 }, {
52 id: 2,
53 name: "水浒传",
54 cdate: "1891-11-21"
55 }, {
56 id: 3,
57 name: "聊斋异志",
58 cdate: "1895-2-13"
59 }, {
60 id: 4,
61 name: "大宋提刑官",
62 cdate: "1899-01-18"
63 }]
64 },
65 methods: {
66 edit: function(id) { //点击编辑获取该行的数据
67 var getone = this.historys.filter(function(item) {
68 return item.id == id;
69 })[0];
70 console.log(getone.id + ",name=" + getone.name);
71 this.inputid = getone.id;
72 this.inputname = getone.name;
73 this.disableflag = 1;
74 this.addorEdit = true;
75 },
76 deleteSoft: (id, index) => { //splice删除操作
77 console.log(this); //windows对象
78 console.log("index=" + index);
79 var getone = this.app.historys.filter(function(item) {
80 return item.id == id;
81 });
82 var getfindIndex = this.app.historys.findIndex(function(item) { //也可以这样来找到索引
83 return item.id == id;
84 });
85 console.log("getfindIndex=" + getfindIndex); //
86 console.log(getone[0].id + ",name=" + getone[0].name);
87 this.app.historys.splice(index, 1); //在数据中的第几个索引开始删除几个
88 console.log("删除成功");
89 },
90 submitbtn: function() {
91 console.log(this);
92 var getinputid = this.inputid;
93 var getinputname = this.inputname;
94
95 console.log(getinputid + "," + getinputname);
96 this.disableflag = 0;
97 if (this.addorEdit) { //编辑
98 if (this.isEmptyorNull(getinputid) || this.isEmptyorNull(getinputname)) {
99 alert("id和名称不可以为空");
100 return;
101 }
102 var geteditobj = this.historys.filter(function(item) {
103 return item.id == getinputid;
104 });
105 geteditobj[0].name = getinputname; //这里需要加上下标
106 console.log("编辑成功");
107 this.inputid = "";
108 this.inputname = "";
109 } else {
110 if (this.isEmptyorNull(getinputname)) {
111 alert("名称不可以为空");
112 return;
113 }
114 var listid = [];
115 this.historys.forEach(function(item) {
116 listid.push(item.id);
117 })
118 var getMaxid = Math.max(...listid) + 1; //查找出最大的id
119 console.log("getMaxid:" + getMaxid);
120 this.historys.push({
121 id: getMaxid,
122 name: getinputname,
123 cdate: "1998-10-12"
124 });
125 console.log("新增成功");
126 }
127 this.addorEdit = false;
128 },
129 isEmptyorNull: function(str) {
130 if (str == "" || str == "undefined" || str == null) {
131 return true;
132 }
133 return false;
134 }
135 }
136
137 })
138 </script>
139 </body>
140
141 </html>
3：测试效果如下
4：总结：
当你认真去做了，才会明白其中存在的细节，当你完成一个小Demo后也会感觉有小成就感的，再回头看时：嗯还行，挺简单的！
不去动手做就越堆越多，到时候会然人感觉啥都会一点，又啥都不精通，处于恶性循环的境地。其实个人觉得还是需要落地多多实操 即可，大不了多来几次！需要先打好扎实的基础！
永远不要眼高手低，Vue完整实现一套简单的增删改查CURD操作的更多相关文章
- vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)
提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...
- 一个完整的mybatis项目，包含增删改查
1.导入jar包,导入相关配置文件,均在自己博客园的文件中 编写mybatis.xml文件 <?xml version="1.0" encoding="UTF-8& ...
- Vue 里面对树状数组进行增删改查 的方法
[{"id":"5e4c3b02fc984961a17607c37712eae0", "optLock":0, "parentId ...
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- ssm学习（四）--完整的增删改查demo
上一篇文章简要介绍了将sping mvc加入整个框架,算是完成了ssm的集成.本节继续前面的内容,结合spring mvc做一个简单的增删改查demo. 1.首先,重写一下GeckoList.jsp页 ...
- webpack4+express+mongodb+vue 实现增删改查
在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...
- vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
随机推荐
- CodeForces 1119D（差分+前缀和+二分）
题意:给你一个数组,数组每次每个数都+1,有q次查询每一查询+L到+R中出现的所有不重复的数字个数. +L到+R其实就相当于是0到+(R-L+1) 感觉自己写的好啰嗦,直接上代码加注释: 1 #inc ...
- 2020杭电多校 C / HDU 6879 - Mine Sweeper
题意: t组输入,每组输入一个s 你需要输出一个r行c列的阵列,这个阵列中'X'代表炸弹,'.'表示没有炸弹 对于'.'这些位置都会有一个数值,这个值取决于这个位置附近8个位置,这8个位置一共有几个炸 ...
- K8s Deployment YAML 名词解释
Deployment 简述 Deployment 为 Pod 和 ReplicaSet 提供了一个声明式定义 (declarative) 方法,用来替代以前的 ReplicationControlle ...
- Linux-字符处理命令
目录 1.sort(排序) 2.uniq(不相邻的两行重复不会去除) 3.cut(取列,截取字段) 4.wc(统计行.单词.字符数) 1.sort(排序) 选项: -t # 指定分隔符 -k # 指定 ...
- leetcode5 最长回文字符串 动态规划 Manacher法
dp 注意没有声明S不空,处理一下 o(n^2) class Solution { public: string longestPalindrome(string s) { if (s.empty() ...
- 鸟哥的linux私房菜——第七章学习（Linux 磁盘与文件系统管理）
1.1).文件系统特征 我们称呼一个可被挂载的数据为一个文件系统而不是一个分区! 文件系统通常会将这两部份的数据分别存放在不同的区块,权限与属性放置到 inode 中,至于实际数据则放置到 data ...
- Codeforces13C–Sequence （区间DP）
题目大意 给定一个含有N个数的序列,要求你对一些数减掉或者加上某个值,使得序列变为非递减的,问你加减的值的总和最少是多少? 题解 一个很显然的结果就是,变化后的每一个值肯定是等于原来序列的某个值,因为 ...
- C++ part6
C++源文件从文本到可执行文件经历的过程 references: 一个C++源文件从文本到可执行文件经历的过程 C++源文件从文本到可执行文件经历的过程 gcc程序编译的静态链接和动态链接 保留中间过 ...
- Dockfile搭建极简LNMP环境
最近才发现ThinkPHP6.0和CI4.x都要求php版本为7.1以上了,本机的php版本还停留在7.0.3x,又懒得升级,于是考虑使用Docker来运行一个lnmp环境. 常规环境搭建的方式有两种 ...
- SQL优化这么做就对了
目录 前言 SQL优化一般步骤 1.通过慢查日志等定位那些执行效率较低的SQL语句 2.explain 分析SQL的执行计划 3.show profile 分析 4.trace 5.确定问题并采用相应 ...