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实现星级评价效果实例详解
这篇文章主要介绍了Vue实现星级评价效果的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
vue路由跳转携带参数的方式总结
我们知道在vue中每个页面都需要在路由中声明,下面这篇文章主要给大家介绍了关于vue路由跳转携带参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue-cli2与vue-cli3在一台电脑共存的实现方法
这篇文章主要介绍了vue-cli2与vue-cli3在一台电脑共存的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Vue3 localStorage读取数组并赋值的问题及解决
这篇文章主要介绍了Vue3 localStorage读取数组并赋值的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-06-06
使用vue-cli创建vue项目介绍
这篇文章介绍了使用vue-cli创建vue项目的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-01-01
Vue中状态管理器(vuex)详解以及实际应用场景
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
vue3父子通信ref,toRef,toRefs使用实例详解
这篇文章主要介绍了vue3父子通信ref,toRef,toRefs使用实例详解,分别介绍了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
2023-10-10
vue 实现websocket发送消息并实时接收消息
这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下
2019-12-12
vue发送ajax请求详解
如何利用vue进行AJAX,其它vue本身不支持发送AJAX请求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行
2018-10-10
最新Vue过滤器介绍及使用方法
过滤器是vue为开发者提供的功能，常用于文本的格式化，过滤器应该被添加在JavaScrip表达式的尾部，由“管道符”进行调用，这篇文章通过案例给大家讲解Vue过滤器介绍及使用方法，需要的朋友参考下吧
2022-11-11