在Vue中，使用json數據格式是很常見的。看到json數據，我們通常更喜歡將其格式化來方便我們觀看。Vue提供了一個組件，用于格式化json數據。

<template>
<div class="json-format">
<pre>{{ formatJson(data) }}</pre>
</div>
</template>
<script>
export default {
name: 'JsonFormat',
props: {
data: {
type: Object,
default: null
}
},
methods: {
formatJson(json) {
if (!json) {
return '';
}
try {
// 將json格式化
return JSON.stringify(json, null, 2);
} catch (e) {
// json格式有誤返回原始json數據
return json;
}
}
}
}
</script>

代碼中首先定義了一個名為JsonFormat的組件，它接收一個名為data的props屬性，類型為Object。組件的模板中使用pre標簽來顯示formatJson方法處理后的json數據。

在methods中定義了formatJson方法，它的作用是將傳入的json數據格式化并返回。如果傳入的json數據為空，則返回空字符串；如果格式化時出現錯誤，則返回原始數據。

在Vue中使用該組件時，只需要將需要格式化的json數據傳入即可：

<JsonFormat :data="jsonData" />

以上代碼中，將jsonData數據傳入JsonFormat組件中，即可將其格式化并顯示出來。

使用Vue提供的JsonFormat組件，能夠非常方便地將json數據格式化，使得開發過程更加便捷。