在vuepress中呈现本地JSON数据

Question

我有一个简单的vuepress网站，我正在读取一个.json文件在index.md上使用；

{{ require('./nba.json') }}

它工作得很好，看上去像附在上面的图像；

vuepress网站上的json

正如你所看到的，它看起来并不是最好的。在vuepress中，我怎样才能具体地把正在读到的东西写成风格呢？更改字体大小，以整洁的方式显示信息等？

Answer 1

在Vuepress中(通常是Vue + Webpack )，导入的json文件只是JavaScript对象，所以您可以使用它与Vue一起生成您想要的任何东西……

<div v-for="i in items">
    <h2>{{i.Home_neutral}} - {{i.Visitor_Neutral}}</h2>
    <p>{{ i.Date }}</p>
</div>

<script>
import data from './nba.json'
export default {
  data () {
      return {
          items: data
      }
  }
}
</script>

如何使用此代码有两种方法。

1. 您可以将它作为NbaMatches.vue放到NbaMatches.vue目录中--它变成全局分量，并且可以作为<NbaMatches />在任何md文件中使用(您需要将模板部分-- <script>上面的所有部分--包装到<template></template>中)。
2. 您只需按原样将上面的代码直接复制/粘贴到任何md文件中，它就会正常工作。