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>
相关推荐
变与不变80610 小时前
防抖节流详解
开发语言·前端·javascript
用户66026761187910 小时前
HTTP 200,页面仍是旧状态:定位一次前后端字段错配
javascript
用户725264966296910 小时前
浏览器为什么加载不了超大图片
前端·javascript
酷炫码神11 小时前
Day 2|CSS 盒模型:把昨天的骨架,变成能看的页面
前端·css
Amos_Web11 小时前
我做了一个 Chrome 插件,专治“这篇文章我明明看过,但重点去哪了?”
前端·浏览器
OpsEye11 小时前
企业 AI 治理到底管什么:预算、权限、会话、效能四个维度
javascript·ai编程
abcyuu11 小时前
用友 U8 Cloud 生产制造模块深度解析:从 BOM 建立到成本核算的技术实现
前端·数据库·制造
零基础12311 小时前
为什么 Agent 用 SQLite 数据库?
前端·人工智能·sqlite·开源
xuyanzhuqing11 小时前
如何在一周内将一个巨石工程实现国际化
前端
数据掘金11 小时前
小程序埋点方案的埋点覆盖率怎么算?
前端