Gridsome(五)—— 获取json数据

在Gridsome(四)中搭建了简易博客，获取markdown文件内容，今天学习在gridsome中如何获取json数据👇👇👇

创建项目

gridsome create +项目名

json数据

在src同级目录下新建文件data——>XX.json，内容如下：

[
    {
        "name":"Anna",
        "age":18,
        "sex":"女"
    },
    {
        "name":"Jack",
        "age":20,
        "sex":"男"
    },
    {
        "name":"Tom",
        "age":22,
        "sex":"男"
    }
]

vue文件

在pages目录下新建testJson.vue文件，操作如下：

• 引入上面定义的json文件

• data里面定义变量，比如：testData

  注意：此处直接定义个变量就行，不能写成testData:[]

• 具体代码

  <template>
    <div>
        <ul v-for="(item,index) in testData">
            <li>姓名：{{item.name}}</li>
            <li>年龄：{{item.age}}</li>
            <li>性别：{{item.sex}}</li>
        </ul>
    </div>
  </template>
  
  <script>
  import testData from "../data/testJson.json";
  export default {
    name: '',
    data() {
      return {
          testData    //注意此处的定义
      };
    },
    mounted(){
      //   console.log(this.testData);
    },
  };
  </script>
  
  

• 结果

  
  gridsome中获取json数据就完成了,数据只要符合json格式即可，引入方式没有markdown那么繁琐。