vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不推荐)

更新时间：2023年07月21日 09:30:28 作者：subsistent

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行，这篇文章主要介绍了vue中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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue iview多张图片大图预览、缩放翻转
这篇文章主要为大家详细介绍了vue iview多张图片大图预览、缩放翻转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue.js数据加载完成前显示原代码{{代码}}问题及解决
这篇文章主要介绍了vue.js数据加载完成前显示原代码{{代码}}问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
关于vue跳转后页面置顶的问题
这篇文章主要介绍了关于vue跳转后页面置顶的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue3+Element Plus实现自定义穿梭框的详细代码
找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件,本文给大家分享vue3+Element Plus实现自定义穿梭框的示例代码,感兴趣的朋友一起看看吧
2024-01-01
详解vue通过NGINX部署在子目录或者二级目录实践
这篇文章主要介绍了详解vue通过NGINX部署在子目录或者二级目录实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue中的公共方法调用方式
这篇文章主要介绍了vue中的公共方法调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue项目配置同一局域网可使用ip访问的操作
这篇文章主要介绍了vue项目配置同一局域网可使用ip访问的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue3动态路由addRoute实例详解
这篇文章主要介绍了vue3动态路由addRoute的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
vue实现水波涟漪效果的点击反馈指令
鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。
2021-05-05
Vue3 如何通过虚拟DOM更新页面详解
这篇文章主要为大家介绍了Vue3 如何通过虚拟DOM更新页面详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09