vue 格式化显示json
时间: 2023-11-12 12:06:21 浏览: 42
Vue.js没有自带的JSON格式化插件,但可以使用第三方插件或者自己编写过滤器来实现JSON格式化显示。以下是使用第三方插件的示例:
1. 安装插件
使用npm安装"vue-json-pretty"插件:
```bash
npm install vue-json-pretty
```
2. 引入插件
在Vue组件中引入插件:
```javascript
import VueJsonPretty from 'vue-json-pretty';
```
3. 使用插件
在模板中使用插件:
```html
<vue-json-pretty :data="jsonData"></vue-json-pretty>
```
其中,"jsonData"是需要格式化的JSON数据。
完整示例代码:
```html
<template>
<div>
<vue-json-pretty :data="jsonData"></vue-json-pretty>
</div>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty';
export default {
name: 'JsonFormat',
components: {
VueJsonPretty,
},
data() {
return {
jsonData: {
name: 'John',
age: 30,
cars: [
{
name: 'Ford',
models: ['Fiesta', 'Focus', 'Mustang'],
},
{
name: 'BMW',
models: ['320', 'X3', 'X5'],
},
],
},
};
},
};
</script>
```
运行效果:
![json-format-result](https://user-images.githubusercontent.com/5827617/56540631-a6d58c80-65ca-11e9-8b5c-2c6e1f6c2325.png)