vue 接口數據（數組）語句

當接口數據已經有數組時，其實更簡單，直接調出數據中的數組，使用數據中的名稱。

1 <div v-for="item in listarr" 
2         :class="{red:item.runStatus==1,blue:item.runStatus==2,orange:item.runStatus==3}">//判斷item.runStatus的值，值不一樣class不一樣
3      <i class="glyphicon text-center glyphicon-star" v-if="type == 3"}"></i>//type不一樣，i的class不一樣（這裏是bootstrap的圖標）
4      <i class="glyphicon text-center glyphicon-globe" v-if="type == 4"></i>
5      <p class="text-center windp">{{item.deviceName}}{{item.runStatus}}</p>//插入數據 
6      <p class="text-center windptwo">{{item.buildName}}&nbsp;{{item.floorName}}</p>
7 </div>

 vue：

1 export default{
2     data(){
3         return {
4             listarr:[],
5             type:this.$route.params.type,//定義type
6         }
7     },        

 鏈接接口語句
 1 getflistarr(){
 2               this.http({
 3                   url: `url`,
 4                   method: 'GET',
 5                   data: {
 6                       orgId:this.$route.params.id,
 7                       deviceGroup:this.$route.params.type,
 8                       
 9                   }
10              }).then(res => {
11                  this.listarr=res.data.result.list  //取出數據
12              }, e => e);
13         },
14        
15         },
16       ready(){
17          this.getflistarr();
18    }
19  }

json數據

雜：接口不是數組時的語句，List方法取出接口數據再放入flist數組，定義（num，name）

 1  List(){
 2             this.http({
 3                 url: `url`,
 4                 method: 'GET',
 5                 data: {
 6                     orgId:this.$route.params.id,
 7                     deviceGroup:1,
 8                     
 9                 }
10             }).then(res => {
11                 const result = res.data.result;
12                 this.flist.push({num:result.deviceCount,name:'1'},{num:result.unDayDeviceCount,name:'2'},{num:result.unDeviceCount,name:'3'});
13             }, e => e);
14         },