comTest.jsonファイルの内容は、NewsList.vueファイルを導入し、

この記事の目標：ファイル内の拡散.jsonデータと呼ばれ、ファイルがNewsList.vueに渡されます。主にエク​​スポートすることによって、および締め付けられ} {（）データに渡されます

1. 名前の新しいファイル：commTest.json
   

   {
      " SchoolName "：" 都市の場所ハウスガーデン実験小学校" 、" スコア" ：[{ " scoreName "：" 言語" 、" scoreTime "：" 火曜日" }、{ " scoreName "：" 数学" 、" scoreTime "：" 木曜日" }、{ " scoreName "：" 英語" 、"scoreTime "：" 金曜日" }]}

    

2. 次のコードファイルに組み込まれNewsList.vue
   

   <テンプレート> 
     <DIV CLASS = "NewsList"> 
       NewsList 
       <H1> {{MSG}} </ H1> 
       <H2> {{schoolName}} </ H2> 
       <UL> 
         <LIのV-ため= "スコアでスコア" 
             ：キー= "score.scoreName"> 
           {{score.scoreName}} - > {{score.scoreTime}} 
         </ LI> 
       </ UL> 
     </ div> 
   </テンプレート> 
   <SCRIPT> 
   // JSONの
   インポートcommTest '../../assets/commTest.json'から
   の輸出のデフォルト{ 
     データ（）{ 
       リターン{ 
         'NewsList.vue组件'：MSG 
         schoolName： '宿城区府苑实验小学'、
         // commTest。JSONファイル送信データ変数のスコアのスコアの
         スコア：commTest.scores 
       } 
     } 
   }
   </ SCRIPT>