每天记录一个小功能

html页面

<template>
   <view>
     <view>程序员</view>
     <view  v-for="(item,index) in  list.programmers"> 
        <view class="mytext">
           <text>姓：{{item.firstName}}</text><text>名字：{{item.lastName}}</text>
           <text>邮箱：{{item.email}}</text> 
        </view>
     </view>
     
     <view>作者</view>
     <view  v-for="(item,index) in  list.authors"> 
        <view class="mytext">
           <text>姓：{{item.firstName}}</text><text>名字：{{item.lastName}}</text>
           <text>体裁：{{item.genre}}</text> 
        </view>
     </view>
     
     <view>音乐家</view>
     <view  v-for="(item,index) in  list.musicians"> 
        <view class="mytext">
           <text>姓：{{item.firstName}}</text><text>名字：{{item.lastName}}</text>
           <text>工具：{{item.instrument}}</text> 
        </view>
     </view>
   </view>
</template>

<script>
  import  testJsonData  from  "../../common/test.json"
  console.log(testJsonData.programmers[0].email);
  export   default{
    data(){
      return {
        list:testJsonData
      }
    }
  }
    
</script>

<style>
  .mytext  text{
    display: inline-block; 
    margin-left: 20px;
    
  }
</style>

json数据页面 

{ "programmers": [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }

],

"authors": [

{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

],

"musicians": [

{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

] }

 效果展示：