v-for和v-if不能一起使用(vue for和if)

Vue中v-for不能和v-if写在一起的原因v-for指令用于循环渲染列表，v-if用于根据条件动态渲染元素

这两个指令是vue中最常用的指令，但是不能一起使用，因为v-for比v-if优先级高

一个例子是：

templatedivclass='home'h1这是一个主页/h1h4v-for='(item,index)inlist':key='index'v-if='show===true'{{item}}/h4/div/templatescriptimport{ref}from'vue'exportdefault{name:'HomePage',setup(){constlist=[1,2,3,4,5,6]constshow=truereturn{list,show}}}/脚本

我们写的初衷是，如果show为false，我们就不会显示列表。如果show为true，我们将循环遍历列表。

但如果把v-for和v-if放在一起，其实就相当于依次渲染6个div，每一个都加上了v-if判断。

//相当于下面的形式h4v-if='show===true'1/h4h4v-if='show===true'2/h4h4v-if='show===true'3/h4h4v-if='show===true'4/h4h4v-if='show===true'5/h4h4v-if='show===true'6/h4

也就是说，每一次循环都会进行v-if判断。这是非常消耗性能的。大量的判断会大大降低项目的质量。因此，Vue官方并没有在风格指南中推荐它，甚至允许你将其放入风格指南中。一起写

但在实际开发中，肯定会遇到类似的场景，需要根据条件循环渲染。如何解决这个问题呢？

方法一：

在v-if不依赖v-for的前提下，将v-if直接移到外层。由于v-for的优先级比v-if高，所以我先把v-if放在最外层。难道还不足以做出判断吗？

templatedivclass='home'h1这是一个主页/h1divv-if='show===true'h4v-for='(item,index)inlist':key='index'{{item}}/h4/div/div/模板

方法二：

上面的例子中，v-if依赖于data数据中的show变量来控制是否显示，即不依赖于v-for的某个值。

如果我需要根据v-for的索引值来控制是否显示怎么办？

即v-if的判断条件需要依赖于v-for的某个值(item,index)

templatedivclass='home'h1这是一个主页/h1h4v-for='(item,index)inlist_filter':key='index'{{item}}/h4/div/templatescriptimport{计算}from'vue'export默认{name:'主页',setup(){constlist=[1,2,3,4,5,6]constlist_filter=计算(()=list.filter((item,index)=item!==5))返回{列表，list_filter}}}/脚本

对于这种情况，我们可以用计算属性list_filter替换list，并让它返回过滤后的列表

好处是：

1.过滤列表

只有当列表数组发生相关变化时才会重新计算，使得过滤更加高效。

2.解耦渲染层的逻辑，使其更易于维护。