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条数据显示） - 踩坑篇” 的全部内容。

v-for和v-if同时使用（案例分析：循环最新的前14条数据显示） - 踩坑篇相关推荐

phpcmsV9 QQ登录问题分析 - 踩坑篇
是否遇到过以下的问题: 问: phpcms v9会员登录注册怎么一直提示操作失败啊,前台后台都是!连接数据库没问题,更新缓存也没用答: 重装apache就好了? 问: phpcms 注册添加用户 ...
vantUI 弹出层（轻提示）案例 - 踩坑篇
vantUI 弹出层(轻提示)- 踩坑篇可自定义项: 显示时长显示内容显示何时消失代码 · 实例: if(this.checkedAgreement == false){this.$toast
python int函数的实现_python实现int函数的案例分析
python实现int函数的案例分析发布时间:2020-08-06 14:35:55 来源:亿速云阅读:88 作者:小新 python实现int函数的案例分析?这个问题可能是我们日常学习或工作经常 ...
mysql联合索引案例_mysql多个联合索引的案例分析
mysql多个联合索引的案例分析发布时间:2020-11-23 14:54:29 来源:亿速云阅读:61 作者:小新小编给大家分享一下mysql多个联合索引的案例分析,相信大部分人都还不怎么了解 ...
网络工程师--网络规划和设计案例分析（7）
案例一:某企业组网方案如下图所示,网络接口规划如下面表格所示,公司内部员工和外部访客均可通过无线网络访问企业网络,内部员工无线网络的SSID为Employee,访客无线网络的SSID为Visitor ...
python中水平制表符_python中制表符的案例分析
python中制表符的案例分析发布时间:2020-11-11 14:04:04 来源:亿速云阅读:79 作者:小新小编给大家分享一下python中制表符的案例分析,相信大部分人都还不怎么了解,因 ...
ORA-04031错误导致宕机案例分析
今天遇到一起ORACLE数据库宕机案例,下面是对这起数据库宕机案例的原因进行分析.解读.分析过程中顺便记录一下这个案例的前因后果,攒点经验值,培养一下分析.解决问题的能力. 案例环境: 操作系统 :O ...
网络工程师学习参考资料路由器配置案例分析
网络工程师学习参考资料路由器配置案例分析 2006-08-30 23:01:00 标签:配置路由器案例网络工程师 [推送到技术圈] INTERNET共享资源的方式越来越多,就大多数而言,DDN专 ...
《深入理解JVM.2nd》笔记（五）：调优案例分析与实战
文章目录概念案例分析高性能硬件上的程序部署策略情景再现1 问题分析1 关于Full GC 使用64位JDK来管理大内存可能遇到问题建立逻辑集群使用逻辑集群可能遇到的问题最后解决方案集群 ...

v-for和v-if同时使用（案例分析：循环最新的前14条数据显示） - 踩坑篇

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

解决办法：

v-for和v-if同时使用（案例分析：循环最新的前14条数据显示） - 踩坑篇相关推荐

最新文章

热门文章