vue js 字符串数组比对 比如 比对如下这两个数组 ['1','2'] ['1','2-3']

Vue.js提供了一种比较字符串数组变化并高亮变化部分的方法。你可以使用diff_match_patch库来实现这个功能。首先，你需要安装diff_match_patch库。然后，你可以使用diff_main方法来比较两个字符串数组的差异，并返回一个二维数组，其中数组的第一项表示内容类型（0表示公共部分，1表示新增部分，2表示删除部分）[^1]。

下面是一个示例代码，演示如何比较两个字符串数组['1','2']和['1','2-3']的差异，并高亮显示变化的部分：

// 安装diff_match_patch库
// npm install diff-match-patch

// 引入diff_match_patch库
import { diff_match_patch } from 'diff-match-patch';

// 创建diff_match_patch实例
const dmp = new diff_match_patch();

// 定义两个字符串数组
const arr1 = ['1', '2'];
const arr2 = ['1', '2-3'];

// 将字符串数组转换为字符串
const str1 = arr1.join(',');
const str2 = arr2.join(',');

// 比较两个字符串的差异
const diffs = dmp.diff_main(str1, str2);

// 遍历差异数组，根据内容类型进行处理
diffs.forEach(diff => {
  const [type, text] = diff;
  if (type === 0) {
    // 公共部分，无需处理
    console.log(text);
  } else if (type === 1) {
    // 新增部分，添加样式
    console.log(`<span style="background-color: yellow;">${text}</span>`);
  } else if (type === -1) {
    // 删除部分，添加样式
    console.log(`<span style="background-color: red;">${text}</span>`);
  }
});

这段代码会输出以下结果：

1
2<span style="background-color: yellow;">-3</span>

这表示第二个数组中新增了"-3"这个元素，并且使用黄色背景高亮显示了这个变化部分。