Vue中JSON格式（新｜旧）进行比较 vue-code-diff

coder_wangs

已于 2022-03-11 10:22:39 修改

阅读量6.1k

点赞数 2

文章标签： vue.js json javascript

于 2022-01-06 11:31:34 首次发布

本文链接：https://blog.csdn.net/web_wp/article/details/122339925

版权

npm install vue-code-diff -S

<template>
  <div class="compare">
    <CodeDiff class="center"
              :old-string="oldStrToCompare"
              :new-string="newStrToCompare"
              :drawFileList="true"
              :context="1000"
              outputFormat="side-by-side" />
  </div>
</template>

<script>
import CodeDiff from 'vue-code-diff'

export default {
  components: {
    CodeDiff,
  },
  data() {
    return {
      oldStr: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '虎',
          address: '上海市普路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      newStr: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  computed: {
    oldStrToCompare() {
      return JSON.stringify(this.oldStr, null, 2) //重点！ 格式化添加空格
    },
    newStrToCompare() {
      return JSON.stringify(this.newStr, null, 2)//重点！ 格式化添加空格
    },
  },
}
</script>

<style scoped>
.center {
  max-height: 600px;
  overflow-y: auto;
}
}

</style>

结果展示

如需要起始行左右对齐：

/* 样式穿透-起始行左右对齐，*/
.center>>>.d2h-code-side-line{
  height:25px;
}

vue-code-diff 推荐： https://github.com/ddchef/vue-code-diff#%E5%AE%89%E8%A3%85