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>

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  }

 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         },