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>
相关推荐
QING61811 分钟前
使用ADB分析CPU性能 —— 基础指南
android·前端·app
SuperEugene12 分钟前
浏览器存储:localStorage / sessionStorage / cookie 应该怎么用
前端·javascript·面试·浏览器
Apifox14 分钟前
Apifox 2 月更新|MCP Client 调试体验优化、测试套件持续升级、支持公用测试数据、测试报告优化
前端·后端·测试
Xin_z_29 分钟前
解决 el-link 点击锚点导致 URL 变化的问题
vue.js
敲敲了个代码39 分钟前
vue文件自动生成路由会成为主流
开发语言·前端·javascript·vue.js·前端框架
程序员林北北43 分钟前
【前端进阶之旅】typescriot的数据类型讲解(二)
前端·javascript·vue.js·react.js·typescript
霍理迪1 小时前
JS—事件高级
开发语言·javascript·ecmascript
火车叼位1 小时前
TypeScript 类型体操:如何精准控制可选参数的“去留”
前端·typescript
接着奏乐接着舞1 小时前
vue3面试题
前端·javascript·vue.js
xkxnq1 小时前
第六阶段:Vue生态高级整合与优化(第81天)(Pinia核心进阶)状态模块化设计+跨模块通信(storeToRefs使用避坑)
前端·javascript·vue.js