vue:diff库实现文本对比

news2024/11/19 2:29:41

官方文档 https://www.npmjs.com/package/diff

安装:npm install diff

内容

 <template>
    <div>
      <div style="white-space: pre-line;display: flex;">
        <div>
            <span class="default">{{oldStr}}</span>
        </div>
        <div>
         <span v-for="(item,index) in resultStr" :key="index" :class="item.added?'add':item.removed?'remove':'default'">{{item.value}}</span>
        </div>
      </div>
    </div>
  </template>
<script>
import {diffChars} from 'diff'
export default {
  name: 'CodeMirror',
  data() {
    return {
      resultStr: '',
      chineseStr: `让顾明渊和阮念心这对渣男贱女血债血偿!`,
      oldStr: `should try our best to help others when they are in need of help,but we should also protect ourselves from getting into trouble.If everyone tries a little kindness,our world will be full of love.`,
      newStr: `our best to help others when they are in need of help,but we also should also protect ourselves from getting into trouble.If everyone tries a little kindness,our world will be full of love.`
    };
  },
  mounted() {
    const d = diffChars(this.oldStr, this.newStr)
    this.resultStr = d
  }
};
</script>
<style scoped>
  .remove {
    color: red;
    background-color: #fee8e9;
    text-decoration: line-through;
  }
  .add {
    color: green;
    background-color: #ddffdd;
  }
  .default {
    color: grey;
  }
</style>

实例结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1095338.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

游游的字母串 (环形数组两点之间的位置)

题目链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 yab 输出 3 思路&#xff1a; 暴力枚举&#xff0c;全部变成对应的26个字母字符需要的操作步数&#xff0c;取最少的一个操作步数&#xff0c; 这里的操作步数&#xff0…

2021年12月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python编程&#xff08;1~6级&#xff09;全部真题・点这里 C/C编程&#xff08;1~8级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 执行以下程序 a[33,55,22,77] a.sort() for i in a:print(i)运行…

Java字符串String

【char】类型代表字符类型&#xff0c;【String】类型代表字符串类型&#xff1b; 1.String类 1.1 声明字符串 在Java中字符串必须包含在一对双引号&#xff08;“ "&#xff09;之内。双引号包含的都是字符串。 声明字符串语法&#xff1a; String str; //声明字符串语…

产品经理如何有效跟进开发进度?

作为产品经理&#xff0c;很难跟进开发过程。随着软件开发的复杂性和不断变化的产品环境&#xff0c;产品经理必须保持在开发过程的顶端&#xff0c;并确保目标得到满足。产品经理如何跟进开发进度&#xff1f; 第一步是对开发过程本身有一个扎实的理解。产品经理必须熟悉开发过…

模型预测控制(MPC)中考虑约束中的不确定性(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

OpenAI开放gpt-3.5turbo微调fine-tuning测试教程

文章目录 openai微调 fine-tuning介绍openai微调地址jsonl格式数据集准备点击上传文件 openai微调 fine-tuning介绍 openai微调地址 网址&#xff1a;https://platform.openai.com/finetune jsonl格式数据集准备 使用Chinese-medical-dialogue-data数据集git clone进行下载 …

iOS 17请了一个免费的医生!它为你免费预诊断你的焦虑和抑郁

你的iPhone&#xff08;多亏了iOS 17&#xff09;现在有了心理健康问卷&#xff0c;可以帮助诊断焦虑和抑郁&#xff0c;并帮助你了解两者的风险。 心理健康问题通常是可怕的、复杂的和微妙的&#xff0c;你不能总是准确地说出你的感受属于哪一类。因此&#xff0c;如果你正在…

GB28181学习(八)——历史视音频的回放

要求 采用SIP协议实现会话&#xff1b;采用SIP扩展协议INFO方法的消息体携带视音频回放控制命令&#xff1b;采用RTP/RTCP实现媒体传输&#xff1b;媒体回放控制命令引用MANSRTSP协议中的PLAY、PAUSE、TEARDOWN的请求消息和应答消息&#xff1b;媒体流接收者可为SIP客户端、SI…

Windows系统上配置Python开发环境

目录 Python安装程序 运行安装程序 选择安装选项 完成安装 自动环境变量设置 手动环境变量设置 验证安装 Python安装程序 首先&#xff0c;您需要从Python官方网站&#xff08;https://www.python.org/downloads/&#xff09;下载Python的最新稳定版本。在页面上选择适用…

接口自动化测试_L3

目录&#xff1a; 整体结构响应断言 响应信息数据极为庞大&#xff0c;针对于“大响应数据”如何断言JSONSchema 简介JSONSchema 整体结构响应断言JSONSchema 的生成JSONSchema 的生成效果界面工具生成第三方库生成&#xff08;Python&#xff09;JSONSchema 验证&#xff08;…

scratch躲避陨石 2023年9月电子学会图形化编程scratch编程等级考试三级真题和答案解析

目录 scratch躲避陨石 一、题目要求 1、准备工作 2、功能实现 二、案例分析

【java学习—七】多态性(34)

文章目录 1. 概念2. 对象的多态2.1. 一2.2. 二 3. 虚拟方法的调用4. 总结 1. 概念 多态性&#xff0c;是面向对象中最重要的概念&#xff0c;在 java 中有两种体现&#xff1a; &#xff08;1&#xff09;方法的重载 (overload) 和重写 (overwrite) 。 重载&#xff1a;本类中…

Go TLS服务端绑定证书的几种方式

随着互联网的发展&#xff0c;网站提供的服务类型和规模不断扩大&#xff0c;同时也对Web服务的安全性提出了更高的要求。TLS(Transport Layer Security)[1]已然成为Web服务最重要的安全基础设施之一。默认情况下&#xff0c;一个TLS服务器通常只绑定一个证书[2]&#xff0c;但…

GEE 18:基于GEE平台的土地荒漠化监测与分析【论文复现】

Desertification 1. 研究背景1.1 参考论文1.2 参数获取1.2.1 NDVI1.2.2 Albedo1.2.3 Normalizing indices1.2.4 Calculating the quantitative relationship1.2.5 Calculating DDI2. GEE2.1 数据2.2 GEE code2.2.1 Study region2.2.2 Reomove cloud for Landsat-82.2.3 Calcula…

Rollup failed to resolve import

问题描述 我在打包vue3的项目的时候报了以下错误 问题原因 打包时&#xff0c;静态资源目录没有识别出来&#xff0c;导致打包终止并报错 问题解决 需要把路径改为跟路径&#xff0c;就可以打包啦 错误资源路径写法 <img src"src/assets/image/底部导航背景/book2…

UE5蓝图-事件、函数、事件分发器

UE5蓝图中的事件、函数、事件分发器理解及学习 1 事件 蓝图的事件在事件图表中。 事件可以进行自定义。 1.1 首先自定义一个事件HelloUE 1.2 为事件指定具体的执行体 1.3 运行事件 1.4 绑定事件到 Actor被点击 先进行事件绑定&#xff0c;绑定完成后&#xff0c;BBBB被点击…

JAVA总结01

1.变量在定义的时候可以不赋初始值&#xff0c;但在使用的时候变量必须有值 2.数据类型 数据类型字节数整型byte1short2int4long8浮点型float4double8字符型char2布尔型boolean1 浮点数默认都是double类型 上面代码报错的原因就是5.0是double类型&#xff0c;不是float类型 当…

【随笔】论多线程CPU离线渲染器的实现:A CPU BASED OFFLINE RENDERING ENGINE

前言 小熊挺喜欢玩游戏的&#xff0c;对于游戏画面有所追求&#xff0c;记得高中第一次玩战地的时候&#xff0c;惊叹于画面细腻的表现&#xff0c;并且还能开坦克车&#xff0c;这样的事情深深吸引了我。我是一个画面党&#xff0c;为了追求更好的画质表现我开始研究设置面板…

windows server 2012 查看已打了哪些补丁

打开控制面板 点击卸载程序 点击 查看已安装的更新 下图是已安装的补丁

Java反射调用jar包

反射作为托管语言的特性&#xff0c;很多框架都依赖反射来实现容器和面向接口编程&#xff0c;对架构程序很重要&#xff0c;首先试验Java的反射部分。 首先创建一个ZLZJar的工程&#xff0c;让他打包成jar包&#xff0c;代码如下 public class Test {//加两个整数public int…