先次先声明 本话题延伸到了语法优先级
而在vue2中 v-for的优先级高于v-if
vue3中 v-if的优先级高于v-for
我们先来说vue2
我们先来看一段代码
<div v-for="(item,index) in 0" v-if="false" :key="item" >{
{ item }}</div>
<div v-else >暂无数据</div>
这是在有v-else的情况下
可能大部分人理解的逻辑是 v-for元素上的v-if的条件是false 条件不成立 那就应该执行v-else了
所以界面应该展示 暂无数据
但确实 两个元素都不会出现在界面上
因为v-if的优先级是要比v-for低的
他们之间的关系不是谁写在前面 而是v-for的优先级高于v-if 先执行v-for 循环一次判断一次
那么 当我们v-for为0或为空时 元素一次都不会循环 那么v-if就不会执行 就自然也不会触发到v-else
简单说 第一个元素 因为v-for遍历的是0 因此没有走循环 自然就没有渲染 从而没有触发v-if 相当于元素就没写一样 而第二个是因为 没有v-if判断过啊 就好比 没有if 哪来的else呢？
其次是 我就是想做每个判断 比如 在v-for中写v-if确实是有用的
比如
<div v-for="(item,index) in 10" v-if="index === 7" :key="item" >{
{
index }}</div>
这个语法是有用的 相当于我们执行了 10次 每一次都会判断一下 判断到下标为7时 他就会条件成立
因而这段代码会在界面上渲染 7下标
因此 界面中会有一个内容为7的div
简单说 如果循环中有要求判断 那是可以一起用的 但循环一次判断一次 对性能确实很不友好 尽量少用
至于 你如果数组是空的 循环都没有执行 那么 v-else 自然也是没用的
因为v-for优先级高于v-if 先执行v-for
然后是vue3
vue3中 v-if和v-for的优先级发生了转换 这次是v-for优先级低于v-if了
还是这段代码我们走一下
<div v-for="(item,index) in 0" v-if="false" :key="item" >{
{ item }}</div>
<div v-else >暂无数据</div>
这次我们会发现 v-else既然被执行了 因为v-if在vue3项目中优先级高 先执行v-if的判断
那么我们再来试试第二段代码
<div v-for="(item,index) in 10" v-if="index === 7" :key="item" >{
{ index }}</div>
这时我们的代码就报警告无效了
因为v-if先执行 他优先级高于v-for
而这个index是v-for中声明的 那就是说 v-for没执行 就没有index 而我们v-if 在先执行的情况下去拿这个index判断 自然是拿不到就报错了
所以 如果现在vue3项目中判断循环中的变量
那就还是多套一层吧
<div v-for="(item,index) in 10" :key="item" >
<div v-if="index === 7">{
{ index }}</div>
</div>
这样就可以了
或者你也可以直接用v-show v-show的优先级还是低于v-for的