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那麼繁瑣。