v-for 和 v-if 在相同元素上存在优先级的问题

在真实项目中,强烈不建议v-for和v-if作用在相同的元素上,因为存在优先级的问题

Vue2中:v-for的优先级高于v-if,如果作用在相同元素上,很可能出现刚创建就被销毁「浪费性能」!

Vue3中:v-if的优先级高于v-for,如果作用在相同元素上,这样在v-if中是无法使用v-for中item/index的如何解决?基于template标签,把v-for和v-if分开即可!「template标签不能设置key属性」

html 复制代码
<ul>
    <template v-for="(item,index)in list">
        <li v-for="(item,index)in list" :key="index" v-if="item.age<=35"> 姓名:                {{item.name}}
        </li>
    </template>
</ul>
相关推荐
环境栈笔记2 分钟前
多账号浏览器选型检查清单:Profile、权限、Session 和任务日志怎么评估
前端·人工智能·后端·自动化
前端炒粉11 分钟前
手写promise
java·前端·javascript
LaughingZhu14 分钟前
智能体经典范式构建:ReAct、Plan-and-Solve 与 Reflection
前端·react.js·前端框架
mONESY17 分钟前
Node.js fs 文件系统模块 四种读写方案全解析
javascript·后端
Larcher21 分钟前
从回调地狱到优雅异步:Node.js 文件操作进化史
javascript·后端·架构
荒诞英雄23 分钟前
从 17MB Vendor 大包到按需加载:Vite 多入口 Vue 组件库首屏优化实践
vue.js·vite
jsonbro23 分钟前
手把手带你实现发布订阅模式
前端·vue.js·设计模式
一只猫的梦23 分钟前
自动化模块 (Automation Module)
前端·chrome
熊猫钓鱼>_>1 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
德福危险1 小时前
从盲打xss到到模板注入:unix靶机渗透之Tempus_fugit4
前端·unix·xss