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>
相关推荐
Verin11 分钟前
Next.js+Wagmi+rainbowkit构建以太坊合约交互模版
前端·web3·以太坊
KenXu14 分钟前
🚀 Cursor 1.0 重磅发布!AI代码编辑器迎来革命性升级
前端
凌辰揽月15 分钟前
Web后端基础(Maven基础)
前端·pycharm·maven
梦想CAD控件19 分钟前
(VUE3集成CAD)在线CAD实现焊接符号自定义
前端·javascript·vue.js
小华同学ai21 分钟前
千万别错过!这个国产开源项目彻底改变了你的域名资产管理方式,收藏它相当于多一个安全专家!
前端·后端·github
lyc23333321 分钟前
鸿蒙数据备份:让用户数据「稳如磐石」的3个核心要点💾
前端
Vowwwwwww24 分钟前
GIT历史存在大文件的解决办法
前端·git·后端
hxxp26 分钟前
使用Vue3开发商品管理器(一)
前端
lyc23333327 分钟前
鸿蒙延迟任务:让后台调度「聪明起来」的3个技巧⏰
前端
lyc23333328 分钟前
鸿蒙延迟任务:条件触发的「智能调度」指南⏱️
前端