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>
相关推荐
克喵的水银蛇6 分钟前
Flutter 通用标签选择组件:TagSelector 支持单选 / 多选
javascript·windows·flutter
2503_928411569 分钟前
12.9 Vue3+Vuex+Js+El-Plus+vite(项目搭建)
开发语言·javascript·ecmascript
Kaze_story13 分钟前
Vue第四节:组件化、组件生命周期
前端·javascript·vue.js
yuzhiboyouye19 分钟前
web前端开发自测清单
前端
妮妮分享28 分钟前
H5获取定位的方式是什么?
java·前端·javascript
weixin_4399306439 分钟前
前端js日期计算跨月导致的错误
开发语言·前端·javascript
niujiangyao41 分钟前
vue v-for列表渲染, 无key、key为index 、 有唯一key三种情况下的对比。 列表有删除操作时的表现
vue.js
零一科技42 分钟前
瑞吉外卖项目,前端源码(用户端)解析
前端
用户930510658222442 分钟前
module federation,monorepo分不清楚?
前端·架构
柳安43 分钟前
手写new操作符执行过程
前端·javascript