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 分钟前
【5】微前端知识点总结
前端·架构
mkae4 分钟前
eBPF高性能版fail2ban
前端
_柴富自由6 分钟前
前端项目国际化解决方案
前端
isixe6 分钟前
Uniapp 监听回到前台并全局唯一弹窗
前端
牛奶18 分钟前
AI双层代码治理:Monorepo × Harness Engineering
前端·aigc·ai编程
蜡台24 分钟前
H5使用Chrome 权限问题
前端·javascript·chrome
掘金一周32 分钟前
你们觉得房贷多少,没有压力 | 沸点周刊 4.30
前端·人工智能·后端
大貔貅喝啤酒32 分钟前
接口测试_Postman(详细版)
javascript·测试工具·node.js·自动化·postman
小小码农Come on34 分钟前
QML访问子项内容
前端·javascript·html
桜吹雪1 小时前
Langchain.js官方文档:构建具备按需加载技能的 SQL 助手
javascript·人工智能·node.js