v-if和v-for优先级问题

本文介绍了 Vue 模板中 v-if 和 v-for 优先级的概念,当 v-if 与 v-for 同时存在时,v-for 优先级更高。这种机制使得我们可以更有效地控制循环渲染,例如只显示未完成的 todo 项。另外,如果要条件性地跳过整个循环,可以将 v-if 放在外层的 template 元素中,以实现不同效果。
摘要由CSDN通过智能技术生成

当它们处于同一节点,v-for的优先级比v-if更高,这意味着 v-if将分别重复运行于每个 v-for循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

<div v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</div>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 <template> template是不会渲染到页面中的。如:


<template v-if="todos.length">
  <div v-for="todo in todos">
    {{ todo }}
  </div>
</template>
<p v-else>No todos left!</p>

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值