vue+elementui v-for 循环卡片列表

画面效果（先上效果图）

v-for维护原则

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

当我使用时发现，因为使用的是ajax获得列表数据，所以组件开始实例化的时候，数据值是没有的，v-for的维护原则是在原有的基础上更新，当你值为0时组件已经实例化了，当你ajax获得数据后，因为它的维护原则，你无法更新你的列表，即使有数据也没用

所以我最后使用了v-if这个指令，它是根据值注销整个组件，并重新实例化整个组件，您可以自己查以下v-if，v-show的区别。watch监听数据变化，在数据更新周期结束后重新实例化组件

组件代码

<template>  
<div v-if="reset">
//该div的子组件的child1的远程查询可以参考我之前的一篇文章，剩下2个子组件您请无视    
<div>      
    <child1 v-on:setMajor="setMajor"></child1>      
    <child2 v-on:setGrade="setGrade"></child2>      
    <child3 v-on:setClassnum="setClassnum"></child3>      
    <el-button type="primary" round @click="selectClassData">查询班级数据</el-button>          
</div>
//该div是循环卡片列表    
<div style="margin-left:1%;margin-right:1%">        
    <el-row>            
        <el-col :span="4" v-for="(item) in tabledata" :key="item.classId" :offset="1" >                
        <div style="margin-top:15px">                    
            <el-card :body-style="{ padding: '0px'}" shadow="hover">                    
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">                    
            <div>                    
            <span>{{item.classGrade}}级{{item.classMajor}}系{{item.classNumber}}班</span><br>                    
            <div class="bottom clearfix">                    
                <time class="time"><strong>创建时间:</strong>{{item.classCreatetime}}</time>                    
                <el-button type="text" class="button" @click="add(item)">查看</el-button>                    
            </div>                
            </div>                
            </el-card>                
        </div>            
        </el-col>        
        </el-row>        
    <div style="margin-left:35%">
//该div是做分页的          
<div class="block">            
    <el-pagination            
    @size-change="handleSizeChange"            
    @current-change="handleCurrentChange"            
    :current-page="current_page"            
    :page-sizes="[4,8, 12, 16]"             
    :page-size="pagesize"                     
    layout="total, sizes, prev, pager, next"            
    :total="total">                
    </el-pagination>          
</div>        
</div>
    
    </div>  
</div>
</template>

数据格式

data() {    
    return {   
        //循环卡片列表的数据源     
        tabledata:null,        
        current_page:1,       
        total:null,        
        pagesize:8,        
        listdata:{        }, 
        //v-if根据它重新实例化组件       
        reset:false,        
        //专业的值        
        major:null,        
        //年级的值        
        grade:null,        
        //班级数字        
        classnum:null,    
        }  
}

获取数据

该方法获得后端数据，将数据赋值给tabledata

allAjax(){        
this.axios.get('http://localhost:8080/studentManagementSystem/selectTclassAll',{            
    params:{              
    limit:this.pagesize,              
    now_page:this.current_page            
    }          
    }).then((response)=>{              
        var thiz=this;                
        thiz.listdata=response.data;            
        this.$set(this.$data,'tabledata',response.data);                   
    }).catch((response)=>{          
    console.log(response);        
    })    
    },

监听数据变化

监听数据变化，数据变化就将reset赋值为true，让组件重新实例化

watch:{      
tabledata:function(){          
    this.$nextTick(function(){          
    /*现在数据已经渲染完毕*/          
    //console.log(this.tabledata);          
    this.reset=true;        
    })      
}  
}

js全部代码（因为我写了关于判断专业年级班级的功能，所以代码比较多，我懒得把其中的代码剥离出去了，您看着复制黏贴

<script>
import grade from './grade'
import classnum1 from './classnum'
import major from './major'

export default {  
name: 'classList',  
components:{    
    'child1':major,    
    'child2':grade,    
    'child3':classnum1,  
},  
data() {    
return {        
tabledata:null,        
current_page:1,        
total:null,        
pagesize:8,        
listdata:{ },        
reset:false,        
//专业的值       
major:null,        
//年级的值        
grade:null,        
//班级数字        
classnum:null,    
}  
},  methods: {    
refresh(){      
location.reload();    
},    
add(item){      
console.log("add");        
console.log(item);        
this.$router.push({name:'classInfo',params:{classInfo:item}});    
},    
handleSizeChange: function (size) {                
this.pagesize = size;                
//console.log(this.pagesize)                
this.judge();    
},    
handleCurrentChange: function(currentPage){                
this.current_page = currentPage;                
this.judge();    
},    
allAjax(){        
this.axios.get('http://localhost:8080/studentManagementSystem/selectTclassAll',{           
 params:{              
 limit:this.pagesize,              
 now_page:this.current_page            
 }          
 }).then((response)=>{              
 var thiz=this;                
 thiz.listdata=response.data;                       
 this.$set(this.$data,'tabledata',response.data);            
 //console.log(this.tabledata);        
 }).catch((response)=>{          
 console.log(response);        
 })    
 },    
 pageNumAjax(){      
 this.axios.get('http://localhost:8080/studentManagementSystem/selectNumByAll',{            
 params:{            }         
  }).then((response)=>{              
  this.total=response.data;              
  //console.log("一共有"+this.total+"条");        
  }).catch((response)=>{          
  console.log(response);        
  })    
  },    
  majorClassnumGradeAjax(){        
  let postData = this.$qs.stringify({                
  class_major:this.major,                
  class_grade:this.grade,                
  class_number:this.classnum                
  });            
  this.axios({            
  method: 'post',                  
  url:'http://localhost:8080/studentManagementSystem/selectTClassByMajorGradeNumber',            
  data:postData            
  }).then((res)=>{                
  if(res.data!='error')                    
  this.tabledata=res.data                
  // console.log(this.states);            
  });    
  },    
  majorAjax(){        
  let postData = this.$qs.stringify({                
  class_major:this.major,                
  limit:this.pagesize,                
  now_page:this.current_page,                
  });            
  this.axios({            
  method: 'post',            
  url:'http://localhost:8080/studentManagementSystem/selectTclassByMajor',            
  data:postData            
  }).then((res)=>{                
  if(res.data!='error')                    
  this.tabledata=res.data                
  // console.log(this.states);            
  });    
  },    
  classnumAjax(){        
  let postData = this.$qs.stringify({                
  class_number:this.classnum,                
  limit:this.pagesize,                
  now_page:this.current_page,                
  });            
  this.axios({            
  method: 'post',            
  url:'http://localhost:8080/studentManagementSystem/selectTclassByNum',            
  data:postData            
  }).then((res)=>{                
  if(res.data!='error')                    
  this.tabledata=res.data                
  // console.log(this.states);            
  });    },    
  gradeAjax(){        
  let postData = this.$qs.stringify({                
  class_grade:this.grade,                
  limit:this.pagesize,                
  now_page:this.current_page,                
  });           
   this.axios({            
   method: 'post',            
   url:'http://localhost:8080/studentManagementSystem/selectTclassByGrade',            
   data:postData            
   }).then((res)=>{                
   if(res.data!='error')                    
   this.tabledata=res.data                
   // console.log(this.states);            
   });    },    
   pageMajorClassnumGradeAjax(){        
   this.total=1    },    
   pageMajorAjax(){        
   let postData = this.$qs.stringify({                
   class_major:this.major                
   });            
   this.axios({           
    method: 'post',            
    url:'http://localhost:8080/studentManagementSystem/selectNumByMajor',            
    data:postData            
    }).then((res)=>{                
    if(res.data!='error')                    
    this.total=res.data;                
    // console.log(this.states);           
     });    
     },    
     pageClassnumAjax(){      
     this.axios.get('http://localhost:8080/studentManagementSystem/selectNumByNum',{            
     params:{              
     class_number:this.classnum            
     }          
     }).then((response)=>{              
     this.total=response.data;                            
     //console.log("一共有"+this.total+"条");        
     }).catch((response)=>{          
     console.log(response);        
     })    
     },    
     pageGradeAjax(){      
     this.axios.get('http://localhost:8080/studentManagementSystem/selectNumByGrade',{           
      params:{              
      class_grade:this.grade            
      }          
      }).then((response)=>{              
      this.total=response.data;              
      //console.log("一共有"+this.total+"条");        
      }).catch((response)=>{          
      console.log(response);        
      })    },    
      setGrade(value){      
      this.grade=value;      
      //console.log('setGrade:'+this.grade);    
      },    setClassnum(value){      
      this.classnum=value.value;      
      //console.log(value.value);      
      //console.log('setClassnum:'+this.classnum);    
      },    
      setMajor(value){      
      this.major=value;      
      //console.log(this.major);    
      },    
      judgeClassData(){      
      if(this.major&&this.classnum&&this.grade){        
      console.log('major num grade not null');        
      this.majorClassnumGradeAjax();        
      this.pageMajorClassnumGradeAjax();      
      }else if(this.major){        
      console.log('major not null');        
      this.majorAjax();        
      this.pageMajorAjax();      
      }else if(this.grade){        
      console.log('grade not null');        
      this.gradeAjax();        
      this.pageGradeAjax();      
      }else if(this.classnum){        
      console.log('classnum not null');        
      this.classnumAjax();        
      this.pageClassnumAjax();      
      }else{         
      this.$message('请选择班级||专业||班级序号');      
      }    
      },    
      judge(){      
      if(this.major&&this.classnum&&this.grade){        
      console.log('major num grade not null');        
      this.majorClassnumGradeAjax();      
      }else if(this.major){        
      console.log('major not null');        
      this.majorAjax();      
      }else if(this.grade){        
      console.log('grade not null');        
      this.gradeAjax();      
      }else if(this.classnum){        
      console.log('classnum not null');        
      this.classnumAjax();      
      }else{         
      this.allAjax();      
      }    
      },    
      selectClassData(){        
      this.judgeClassData();    
      }      
      },  
      beforeMount() {      
      this.allAjax();      
      this.pageNumAjax();        
      },  
      mounted() {        
      }, 

    watch:{      
    tabledata:function(){          
    this.$nextTick(function(){          
    /*现在数据已经渲染完毕*/          
    //console.log(this.tabledata);          
    this.reset=true;        
    })      
    }  
    }
}
</script>
<style scoped>
.time {    
font-size: 13px;    
color: #999;  
}    
.bottom {    
margin-top: 13px;    
line-height: 12px;  
}
  .button {   
   padding: 0;    
   float: right;  
   }
  .image {    
  width: 100%;    
  display: block;  
  }
  .clearfix:before,  
  .clearfix:after {      
  display: table;     
   content: "";  
   }    
   .clearfix:after {      
   clear: both  }
   </style>

初步实现需求