vue 接口数据（数组）语句

当接口数据已经有数组时，其实更简单，直接调出数据中的数组，使用数据中的名称。

<div v-for="item in listarr" 
        :class="{red:item.runStatus==1,blue:item.runStatus==2,orange:item.runStatus==3}">//判断item.runStatus的值，值不同class不同
     <i class="glyphicon text-center glyphicon-star" v-if="type == 3"}"></i>//type不同，i的class不同（这里是bootstrap的图标）
     <i class="glyphicon text-center glyphicon-globe" v-if="type == 4"></i>
     <p class="text-center windp">{{item.deviceName}}{{item.runStatus}}</p>//插入数据 
     <p class="text-center windptwo">{{item.buildName}}&nbsp;{{item.floorName}}</p>
</div>

 vue：

export default{
    data(){
        return {
            listarr:[],
            type:this.$route.params.type,//定义type
        }
    },        

 连接接口语句
 1 getflistarr(){
              this.http({
                  url: `url`,
                  method: 'GET',
                  data: {
                      orgId:this.$route.params.id,
                      deviceGroup:this.$route.params.type,
                      
                  }
             }).then(res => {
                 this.listarr=res.data.result.list  //取出数据
             }, e => e);
        },
       
        },
      ready(){
         this.getflistarr();
   }
 }

json数据

杂：接口不是数组时的语句，List方法取出接口数据再放入flist数组，定义（num，name）

 List(){
            this.http({
                url: `url`,
                method: 'GET',
                data: {
                    orgId:this.$route.params.id,
                    deviceGroup:1,
                    
                }
            }).then(res => {
                const result = res.data.result;
                this.flist.push({num:result.deviceCount,name:'1'},{num:result.unDayDeviceCount,name:'2'},{num:result.unDeviceCount,name:'3'});
            }, e => e);
        },