官方文档 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>
实例结果: