How to realize data display in Json format by vue
In this article Xiaobian for you to introduce in detail "vue how to achieve Json format data display", the content is detailed, the steps are clear, the details are handled properly, I hope that this "vue how to achieve Json format data display" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.
Data display in Json format
The jsonViewer component of vue is also very easy to use. I feel good when I see a component written by God himself (recursive call) on the Internet. Make a little modification and record it.
JSON.stringify (obj, null, 4)
Can beautify the display of json data
The content to be highlighted is in the json data. If there is any content that needs to be highlighted, wrap it with the above tag (this needs to be done with the data, and the highlight style in the component can be modified as needed).
"{{jsonKey}}": {{prefix}} {{innerclosed? ('. '+ subfix):''}} {{isArray?'[]':'{}'}
{{(isArray?'':'"+ item.key +'":)}}
{{subfix}}
Export default {name: 'jsonView', props: {json: [Object, Array], jsonKey: {type: String, default:''}, closed: {type: Boolean, default: true} IsLast: {type: Boolean, default: true}, fontSize: {type: Number, default: 13}, expandDepth: {type: Number, default: 0} Depth: {type: Number, default: 0}}, created () {this.innerclosed =! this.closed? This.closed: this.depth > = this.expandDepth this.$watch ('closed', () = > {this.innerclosed = this.closed})}, data () {return {innerclosed: true}} Methods: {isObjectOrArray (source) {const type = Object.prototype.toString.call (source) const res = type ='[object Array]'| type = ='[object Object] 'return res} ToggleClose () {if (this.innerclosed) {this.innerclosed = false} else {this.innerclosed = true} Computed: {isArray () {return Object.prototype.toString.call (this.json) ='[object Array]'}, length () {return this.isArray? This.json.length: Object.keys (this.json). Length}, subfix () {return (this.isArray?']':'}') + (this.isLast?':',)}, prefix () {return this.isArray?'[':'{'} Items () {if (this.isArray) {return this.json.map (item = > {const isJSON = this.isObjectOrArray (item) return {value: isJSON? Item: JSON.stringify (item), isJSON Key:''}})} const json = this.json return Object.keys (json) .map (key = > {const item = json [key] const isJSON = this.isObjectOrArray (item) return {value: isJSON? Item: JSON.stringify (item), isJSON, key} .bgView {background-color: # efefef; font-family: NotoSansCJKkr;} .json-view {position: relative; display: block Width: 100%; height: 100%; / * white-space: nowrap; * / padding: 020px; box-sizing: border-box; line-height: 30px;} .json-note {color: # 909399;} .json-key {color: # 333333;} .json-value {color: # 333333 } .json-item {margin: 0; padding-left: 20px;} .first-line {padding: 0; margin: 0;} .json-body {position: relative; padding: 0; margin: 0;} .json-body. Body-line {position: absolute; height: 100%; width: 0 Border-left: dashed 1px # bbb; top: 0; left: 2px;} .last-line {padding: 0; margin: 0;} .angle {position: absolute; display: block; cursor: pointer; float: left; width: 20px; text-align: center; left: 0 } .angle:: after {content: "; display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: solid 4px # 333; border-left: solid 6px transparent; border-right: solid 6px transparent;} .angle.angles:: after {border-left: solid 4px # 333 Border-top: solid 6px transparent; border-bottom: solid 6px transparent;} .light {color: # 0595ff;} vue parses json data
After the front end receives the json, it can be parsed using JSON.parse (jsonObject)! (jsonObject is a json object)
Read this, the "vue how to achieve Json format data display" article has been introduced, want to master the knowledge of this article still need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.
