最近做企业信用管理模块，需要展示企业信息变更内容，达到对比效果。
选用diff库：https://github.com/kpdecker/jsdiff

文本

效果图

实现

安装

npm install diff --save

导入库

const Diff = require('diff')

定义data

data () {
    return {
      resultStr: []
    }
  },
  mounted () {
    const d = Diff.diffChars('变更前内容'
    , '变更后内容')
    console.log(d)
    this.resultStr = d
  }

这里的d是一个数组，记录了每一个字符是保持不变、增加、减少。因此实现上述的变更前、后对比只需要调用一次diffChars方法即可，然后遍历数组进行判断展示。
标签展示方式如下：

这里可以再做优化，首先v-show可以优化为v-if，不往页面渲染；其次由于已经有了这个显隐判断，那么在显隐判断中已经隐藏的就不必在三元运算符中再写了
<span
  v-for="(item,index) in resultStr"
  :key="index"
  v-show="!item.removed"
  :class="item.added ? 'green' :item.removed ? 'red' : 'grey'">{{ item.value }}</span>
分割线<hr/>
<span
  v-for="(item,index) in resultStr"
  :key="index"
  v-show="!item.added"
  :class="item.added ? 'green' :item.removed ? 'red' : 'grey'">{{ item.value }}</span>

定义css样式，可以针对新增的、删除的、不变的各自定义样式

.green {
  color: #f00;
}
.red {
  color: #f00;
}