vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不推荐)
vue中v-if和v-for一起使用的弊端及解决办法
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：
<!--
这会抛出一个错误，因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>否则v-for比v-if优先级高，如果遍历的数组元素个数比较多，但是满足v-if条件比较少的情况下，会浪费性能，建议不要使用。而且，每次刷新页面时，都会执行这样性能不高的代码。
如果v-if在v-for里面的话， 可以用计算属性computed解决，通过数组方法filter过滤数组，v-for直接循环计算属性的结果，就不需要使用v-if了。而且computed是有缓存的，就是在它的依赖没有变化时，不会再执行对应计算属性的函数，就提高了性能。
如果v-if在v-for外层的话，可以使用<template>标签。
v-if和v-for不能一起使用的原因以及解决办法
原因：
由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降
解决方案：
第一种：将 v-if 和 v-for 分别放在不同标签中
<ul v-if="active">
<li v-for="(item, index) in list" :key="inde">
<p>{{item.name}}</p>
</li>
</ul>第二种：如果 v-if 和 v-for 只能放在同一级标签中，使用计算属性进行改造：
let title = "自定义"
<ul v-for="(item, index) in lists(list, title)" :key="index">
<li>{{item.name}}</li>
</ul>computed: {
lists () {
return (item, name) => {
return item.filter(item => item.name !== name)
}
}
}以上两种方法都可以解决 eslint 的报错。
到此这篇关于vue中v-if和v-for一起使用的弊端及解决办法的文章就介绍到这了,更多相关vue中v-if和v-for使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3.0 自己实现放大镜效果案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了如何使用Vue实现色板功能，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-06-06
这篇文章主要介绍了vue3第二次传递数据方法无法获取到最新的值,本文通过实例图文相结合给大家详细讲解,感兴趣的朋友一起看看吧2025-04-04
Ant Design Vue全局对话确认框(confirm)的回调不触发
这篇文章主要介绍了Ant Design Vue全局对话确认框(confirm)的回调不触发问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Vue3组件间的通信方式，在使用vue时，我们经常会把不同的模块拆分成不同的组件，而组件之间有的需要传递数据，所以组件间的数据通信就非常重要了2023-04-04
这篇文章主要介绍了vue3+three.js实现疫情可视化,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
详解vuejs中执行npm run dev出现页面cannot GET/问题
这篇文章主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue3 自定义图片放大器效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-07-07
本文主要介绍了Vue透传Attributes使用解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论