react 和 vue(组件化) 实现两份数据的差异对比 合并及撤销

已于 2022-11-24 10:20:25 修改
阅读量860 收藏 4
点赞数 1
分类专栏： 知识 文章标签： react
于 2021-05-25 09:54:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinlulucsdn/article/details/117249402
版权

百度链接 react

链接: https://pan.baidu.com/s/12qewDxDSGiEiV650UX5QWw?pwd=myf2 提取码: myf2

百度链接 vue 已实现为组件  传入数据即可

链接: https://pan.baidu.com/s/1BKqblxM5wh0uZsM3nZ_RDA?pwd=vx27 提取码: vx27

字段解释

  1. 默认展示合并按钮
  2. 点击合并  数据合并 按钮展示撤销合并
  3. 点击撤销合并  数据恢复 
  4. isDeleteThis  被删除
  5. isAddThis      新增 
  6. isChangeThis 数据有被修改
  7. changeVal    被修改的具体字段
  8. isEqual       数据是否一致（未被修改）
  9. isOperation   3 未作处理   1 被撤销  2 被合并
  10. 色值  红色 被删除 蓝色被新增  另一个  被修改的字段

对比

合并之后

撤销之后

秦璐璐
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react-diff-viewer:使用Diff和React制作的简单美观的文本diff查看器组件
04-29
一个由和组成的简单美观的文本diff查看器组件。 它受Github差异查看器的启发，具有拆分视图，内联视图，单词差异，行高亮等功能。 它是高度可定制的，并且几乎支持所有语言。 查看v2.0 安装 yarn add react-diff-viewer # or npm i react-diff-viewer 用法 import React , { PureComponent } from 'react' ; import ReactDiffViewer from 'react-diff-viewer' ; const oldCode = ` const a = 10 const b = 10 const c = () => console.log('foo') if(a > 10) { console.log('bar') } console.log('done') ` ; cons
React 组件转 Vue 组件的命令写法
11-26
基于目前React和Vue比较火，开发react-to-vue 工具的目的是为了进一步提高组件的可复用用性，让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具，转化的是基本的react component，而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件，其中也可以包括发请求。 本文先介绍两个框架的组件共性和不兼容的地方，再介绍react-to-vue的使用和原理。在实际业务中，陆金所100多个的react基础业务组件，react-to-vue可以转化90%以上，变成vue组件。 盘点两个框架的组件共性
react 实现2个Json比对差异 （ codemirror + diff-match-patch）
柠檬草的博客
07-27 992
有本地和远程，不同的位置会有背景色并且颜色标识。
利用angular、react和vue实现相同的面试题组件
08-27
eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
React为 Vue 引入容器组件和展示组件的教程详解
08-27
主要介绍了React为 Vue 引入容器组件和展示组件的教程详解，文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下
react项目配合diff实现文件对比差异功能
见贤思齐焉，见不贤内自省
01-07 3817
react项目配合diff实现文件对比差异功能
vue对比功能-elementui
zhangyuexin24的博客
05-29 3145
使用elementui的table组件实现一个类似于汽车之家的对比功能 不用特殊处理数据，只需使用平时常用的对象数组即可。 效果： 当前页代码： <template> <div class="content"> <h2>使用elementUi 的table来实现类似于汽车之家的对比功能，数据格式与平常使用一致</h2> <div class="yes-sir"> <contrastComp :contrast=
vue 组件里面多个组件_Vue组件，用于多个图像比较
cuk5239的博客
07-30 879
vue 组件里面多个组件 视觉图像差异 (vue-image-diff) vue component for multiple image comparison. currently supported only 8bit jpg and png format. vue组件，用于多个图像比较。 当前仅支持8位jpg和png格式。 Web-App: https://github.com/wh...
【Vue】详细Vue中实例和组件的区别，并进行代码对比
Jacker
09-14 497
实例是Vue的基本概念，代表一个Vue的根实例，页面中只能存在一个根实例；而组件是基于实例的概念，可以对应一个或多个实例，将页面拆分成多个独立的部分。实例和组件的通信方式也不同，实例之间可以通过$emit和$on进行事件通信，而组件之间则可以通过props和$emit进行父子组件间的通信。实例和组件的数据都可以通过data选项进行定义，但是实例的data必须是一个对象，而组件的data必须是一个函数，返回一个对象。实例的方法和生命周期钩子都在实例中定义，而组件的方法和生命周期钩子需要在组件选项中进行定义。
react-gh-like-diff:react react组件生成漂亮HTML以比较提交或文本
05-13
像gh一样React 基于生成类似Github的比较。 您可以比较字符串或给定的来生成漂亮HTML。 演示版 安装 yarn add react-gh-like-diff # or npm install react-gh-like-diff --save 配置 react-gh-like-diff基于diff2html 。 默认配置： const defaultOptions = { originalFileName : 'Unknown-File-Name' , updatedFileName : 'Unknown-File-Name' , inputFormat : 'diff' , outputFormat : 'side-by-side' , showFiles : false , matching : 'none' , matchWordsTh
vue-react：在Vue应用程序中将React组件用作Vue组件
02-04
虚拟React vue-react是Vue.js的插件，它使您可以像使用Vue组件一样使用React组件。 安装 npm npm install vue-react --save 如果尚未安装，请安装react和react-dom软件包。 还安装babel插件。 npm install react react-dom babel-plugin-transform-react-jsx --save 将插件添加到您的.babelrc文件中： { " plugins " : [ " transform-react-jsx " ] } 用法 首先，导入并安装插件： import Vue
react-实现撤消和重做功能的ReactHooks
08-15
实现撤消和重做功能的React Hooks
react如何遍历并比较_再react中使用foreach遍历多种数据
weixin_32605973的博客
01-12 732
背景:有两种结构：对象和数组，对象是没有length这个属性，而数组结构是有的，下面分别说下这两种结构之间的区别和遍历方式。1.对象一个对象以"{"开始，"}"结束。每个"key"后跟一":"，"'key/value' 对"之间运用 ","分隔。let myJson = {"name": "timor", "password": "1111"};for (var val in myJson) {c...
react 实现文本比对差异功能（diff），模仿git提交记录
柠檬草的博客
07-26 863
实现文本左右比对或者是放一起比对，颜色区分新增、删除、变更类型，实现出与git提交记录一样的功能
【工作】vue对比数据差异展示
weixin_46254175的博客
02-02 2152
调研了很多比对的插件，由于我们的数据是动态的且有一些业务逻辑存在，所以最后采用的是html-diff这个依赖。对应的链接为【html-diff提示：以下是我的解决办法，欢迎大家积极留言交流更好的解决方案以上就是今天要分享的内容啦，本文仅仅简单介绍了html-diff的使用从而解决实现比对的业务场景，如果大家对于以上场景有更好的实现方式，欢迎大家积极评论一起交流呀～～～
js将数组转化为一个对象obj，键值对形式{} React 将数组转化为一个对象obj,用于两个数组比较
Winsom1的博客
12-17 806
var formArr = [ 0:{name: “Name”, value: “111”}, 1:{name: “Price”, value: “2”}, 2:{name: “ProducingArea”, value: “3”}, 3:{name: “ShelfLife”, value: “44”}, 4:{name: “Stock”, value: “5”} ]; var obj={ };...
vue:diff库实现文本对比
有问题可关注公众号：前端研究院 后台输入问题回复
02-28 875
文本对比差异，只需要后端将文本内容读取出来提供前端即可
基于CodeMirror和diff-match-patch封装一个vue中的文本对比组件
ju__ju的博客
03-11 2755
如上图 项目中需要对比文本修改前后不同的差异之处. 考虑到方便后期复用,便封装成一个components组件 首先装包 cnpm install diff-match-patch save cnpm install codemirror save <template> <div ref="codeMirror" class="code-contrast" style="width:100%;height:100%"></div> </templ..
node-v9.6.0-x86.msi
最新发布
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
react 和 vue对比
05-01
React和Vue都是流行的JavaScript框架，但它们有很多不同之处。React是由Facebook开发的，Vue是由Evan You开发的。下面是一些比较： 1. 模板语法：Vue使用基于HTML的模板语法，而React使用JavaScript中的JSX语法。 2. 学习曲线：Vue相对较易学习，因为它的API和模板语法都相对简单。React需要更多的学习，因为它使用JSX语法，需要更多的JavaScript知识。 3. 生态系统：React拥有更大、更成熟的生态系统，包括更多的工具和库。Vue在这方面更年轻，但也在不断发展和壮大。 4. 状态管理：Vue拥有VueX，React拥有Redux等状态管理工具，但Vue在处理中型应用方面可能更为简单。 5. 性能：React因其虚拟DOM的实现方式而获得更好的性能，但Vue也可以通过使用模板预编译、异步渲染和虚拟DOM等技术来实现高性能。 综上所述，React和Vue都是优秀的框架，选择哪个主要取决于您的项目需求和个人偏好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值