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>
但是这种方式不符合我的项目需求,因此我使用的是第一种方法。