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>
相关推荐
用户83040713057018 分钟前
外链跳转后首页参数丢失:从缓存兜底到页面重加载的完整方案
vue.js
用户830407130570112 分钟前
路由传参刷新丢失问题:三种解决方案与最佳实践
前端
从文处安14 分钟前
「前端何去何从」高效提示词(prompts):前端开发者的AI协作指南
前端·aigc
大时光16 分钟前
gsap--《pink老师vivo官网实现》
前端
www_stdio19 分钟前
全栈项目第五天:构建现代企业级 React 应用:从工程化到移动端实战的全链路指南
前端·react.js·typescript
my_styles22 分钟前
window系统安装/配置Nginx
服务器·前端·spring boot·nginx
神奇的程序员35 分钟前
不止高刷:明基 RD280UG 在编码场景下的表现如何
前端
Rabbit_QL1 小时前
【音频处理】从 AirPods 主动降噪到音频 Source Separation:同一个问题的两种工程解法
前端·人工智能·音视频
-孤存-1 小时前
Spring Bean作用域与生命周期全解析
java·开发语言·前端