vue中v-for和v-if不能在同一个标签的解决方案

vue项目中同一个标签中不能同时使用v-if和v-for

问题描述

其实这个问题并不会影响vue项目的运行，但是会在编译软件上显示一个报红问题，在别的地方也报红的时候很容易被误导，并且也不美观，因此呢，需要找到一个合理的方案。

这里呢，我试着使用过内外层嵌套的问题，但是，这种方式不符合我的业务需求，并且也达不到即判断又渲染的问题，因此让我苦恼的很长的时间，我甚至去查看了vue的源码，并且发现了一些问题，其实说到底还是自己的脑子没有转过来

问题原因

就像我们可以见到 for 循环中嵌套 if 但是，if 中 怎么能嵌套 for呢？这是一个优先级的问题，因为 for 的优先级比 if 的高，所以在vue中 v-for 的优先级比 v-if 更高

解决方案

这里描述了两种解决方案：

第一种方案：

首先第一种是我最终项目的结局的方式，因为在vue中还有一个 v-show 刚好
可以满足我的项目的需求，而且也不会报错，因此一般，在这种情况下，我
们可以尝试使用 v-show 来试试，是否满足自己的项目需求。

第二种方案：

我们都知道vue中有一种特殊的空标签 template 标签，可以使用 template 标
签作为 循环标签，在标签中进行在填写主要标签进行循环。

代码如下：

<template v-for="(item, index) in list" >
        <div v-if="show" :key="index">
            {{item .name}}
        </div >
</template>

但是这种方式不符合我的项目需求，因此我使用的是第一种方法。