uni-app读取json数据

布满荆棘的人生 2023-01-15 03:52 133阅读 0赞

<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" }
    
    ] }

效果展示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/84dbc44737a64502aa077a82acc499f0.png