永远不要眼高手低,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>

复制代码

 3:测试效果如下

4:总结:  需要动手实操 

这篇关于永远不要眼高手低,Vue完整实现一套简单的增删改查CURD操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/301193

相关文章

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码(Binary-Coded Decima

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja

Python实现批量CSV转Excel的高性能处理方案

《Python实现批量CSV转Excel的高性能处理方案》在日常办公中,我们经常需要将CSV格式的数据转换为Excel文件,本文将介绍一个基于Python的高性能解决方案,感兴趣的小伙伴可以跟随小编一... 目录一、场景需求二、技术方案三、核心代码四、批量处理方案五、性能优化六、使用示例完整代码七、小结一、

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

C#实现一键批量合并PDF文档

《C#实现一键批量合并PDF文档》这篇文章主要为大家详细介绍了如何使用C#实现一键批量合并PDF文档功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言效果展示功能实现1、添加文件2、文件分组(书签)3、定义页码范围4、自定义显示5、定义页面尺寸6、PDF批量合并7、其他方法

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》:本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T