FE

Vue 学习笔记（四十二）：Vue 格式化显示 JSON

仿照 www.kjson.com 格式化显示 JSON。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <textarea
      v-model="message"
      placeholder="input your json to format"
    /> 
    <br />
    <span>formatted json is: </span>
    <pre>{{ JSON.parse(message) }}</pre>
    <br />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ""
    }
  },
};
</script>

比较简单，当然实现的功能也简单。todo 加非法JSON报错提示。

效果：