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

推荐阅读：

vue中v-for和v-if一起使用之使用compute的示例代码

详解vue中v-for和v-if一起使用的替代方法template

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>

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

到此这篇关于vue中v-for和v-if不能在同一个标签的解决方案的文章就介绍到这了,更多相关vue中v-for和v-if不能在同一个标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！