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>
相关推荐
海石3 小时前
微信小程序开发01:XR-FRAME的快速上手
前端·增强现实·trae
叶梅树6 小时前
DocsJS npmjs 自动化发布复盘(Trusted Publisher)
前端·npm
喵叔哟6 小时前
9. 【Blazor全栈开发实战指南】--Blazor调用JavaScript
开发语言·javascript·udp
我命由我123456 小时前
Element Plus - Form 的 resetField 方法观察记录
开发语言·前端·javascript·vue.js·html·html5·js
清空mega7 小时前
《Vue3 项目结构详解:components、views、assets、router、stores 到底该怎么理解?》
前端·javascript·vue.js
雨雨雨雨雨别下啦8 小时前
Vue——小白也能学!Day6
前端·javascript·vue.js
XPoet8 小时前
AI 编程工程化:Hook——AI 每次操作前后的自动检查站
前端·后端·ai编程
難釋懷8 小时前
RedisTemplate配置读写分离
前端·bootstrap·html
冰暮流星8 小时前
javascript如何实现删除数组里面的重复元素
开发语言·前端·javascript
网络点点滴10 小时前
透传属性$attrs
前端·javascript·vue.js