Vue官方文档：永远不要把 v-if 和 v-for 同时用在同一个元素上。

• 官方文档： 避免 v-if 和 v-for 用在一起
• 阅读上述文档：说明vue不支持二者放到同一个标签中使用
• 否则真的会失效bug！

<div class="item nohover"><el-row :gutter="30"><el-col :span="12" v-for="(resume,index) in resumes" :key="index" class="mt20"><el-card v-if="index<14"><div style="padding: 5px;"><div class="clearfix overhide"><p class="fl-l"><span class="spty1">{{resume.resumeName}}.{{index}}</span> <span class="spty2">求职意向</span> <span class="spty3">{{resume.jobIntention}}</span></p><p class="fl-r spty2">期望薪资 <span class="spty4">{{resume.salaryExp}}K</span></p></div><div class="clearfix mt15 overhide"><p class="fl-l"><span class="spty2">经验{{resume.seniority}}年</span> <span class="spty2">{{resume.education}} 倾向地区为</span> <span class="spty3">{{resume.location | areaDiff}}</span> </p><p class="fl-r spty5">{{resume.updateDate | dateDiff}}</p></div></div></el-card></el-col>
<!-- <el-col :span="12"><el-card><div style="padding: 5px;"><div class="clearfix"><p class="fl-l"><span class="spty1">王翔.{{index}}</span> <span class="spty2">求职意向</span> <span class="spty3">电话销售</span></p><p class="fl-r spty2">期望薪资 <span class="spty4">4K</span></p></div><div class="clearfix mt15"><p class="fl-l"><span class="spty2">经验1年</span> <span class="spty2">大专 倾向地区为</span> <span class="spty3">经开区凤凰国际</span> </p><p class="fl-r spty5">刚刚更新</p></div></div></el-card></el-col> --></el-row></div>

解决办法：

如果非要用在一个标签上，那真用不了。

但是：你却可以考虑试着将v-if使用在v-for的子标签(并以标签<section v-if>使用)，这样应该能满足循环时的v-for与v-if的冲突问题。

以上就是关于“ v-for和v-if同时使用（案例分析：循环最新的前14条数据显示） - 踩坑篇” 的全部内容。