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>
相关推荐
Leo655351 分钟前
动态 SQL(行+列) + 动态表头(前端+EasyPoi) = 完整透视报表系统
前端·sql·状态模式
Gary jie2 分钟前
OpenClaw启动日志详细分析
前端·chrome
择势6 分钟前
macOS App 签名与公证流程详解及一键自动化
前端
英俊潇洒美少年19 分钟前
Vue3 中 watch的 flush 选项(默认无/`post`/`sync`)的区别
前端·javascript·vue.js
闲云一鹤21 分钟前
Python 入门(三)- PyAutoGUI 自动化教程
前端·python·黑客
D_C_tyu24 分钟前
HTML | 结合Canvas开发具有智能寻路功能的贪吃蛇小游戏实战详解
javascript·算法·游戏·html·bfs
Jay-r27 分钟前
樱花雨特效 WebGL实现 短视频同款浪漫视觉效果(附源码下载)
开发语言·javascript·ecmascript·编程·webgl·代码·樱花雨
凤山老林27 分钟前
Js如何实现一个抽奖程序
前端·javascript·vue.js
我命由我1234529 分钟前
React - Switch、路由精准匹配与模糊匹配、Redirect
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
陆枫Larry36 分钟前
用 Git 别名(Alias)简化日常操作
前端