Vue 中提供了一種方便的方式來編寫動態地渲染 JSON 數據的模板。這就是 Vue JSON 模板。

在我們的 Vue 組件中，我們可以使用<template>標簽，并將其內部的 HTML 代碼編寫成 JSON 模板。

<template>
<div>
<p>姓名：{{ person.name }}</p>
<p>年齡：{{ person.age }}</p>
<p>性別：{{ person.gender }}</p>
</div>
</template>

我們可以看到，在上述代碼中，我們使用了{{ person.name }}和{{ person.age }}等方式來動態地渲染 JSON 數據。這樣可以有效地將 JSON 數據和我們的 HTML 模板結合在一起。

同時，Vue 還提供了一種簡單方便的方式來將 JSON 數據傳遞到我們的 Vue 模板中。我們只需要在 Vue 組件中定義一個 data 對象，并將 JSON 數據賦值給該對象的某個屬性，然后就可以在模板中使用相應的屬性來訪問該 JSON 數據了。

<template>
<div>
<p>姓名：{{ person.name }}</p>
<p>年齡：{{ person.age }}</p>
<p>性別：{{ person.gender }}</p>
</div>
</template>
<script>
export default {
name: 'JSONTemplate',
data () {
return {
person: {
name: '小明',
age: 18,
gender: '男'
}
}
}
}
</script>

在上述代碼中，我們在 Vue 組件中定義了一個名為person的屬性，并將其賦值為包含 JSON 數據的對象。然后，在模板中我們使用了{{ person.name }}和{{ person.age }}等方式來動態地渲染 JSON 數據，這樣就可以很方便的將數據渲染到我們的模板中。