DDR爱好者之家 Design By 杰米
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中
所以,不推荐v-if和v-for同时使用
使用推荐方式:
<ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul>
或者:放在计算属性遍历
computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul>
当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>
上面的代码只传递了未完成的 todos。
而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:
<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p>
总结
以上所述是小编给大家介绍的vue的注意规范之v-if 与 v-for 一起使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- dnf熊猫套装怎么获得
- MichaelBarenboim,NataliaPegarkova-Barenboim-Mendelssohn_LiederohneWorte(2024)[24-96]fla
- LondonChoralSinfonia-VaughanWilliams_Retrospect(2024)[WAV+CUE]
- 赵传2021-老不休[诗宜文化][WAV+CUE]
- 外媒盘点顶级精细游戏TOP5:《荒野大镖客:救赎2》登顶
- 官方发布《星刃》爆发技能介绍:次元斩切碎强敌
- 《百英雄传》M站均分78:值得一试的复古佳作
- 麻园诗人.2022-闭上眼睛的声音【博山娱乐】【FLAC分轨】
- 任贤齐.1997-很受伤【滚石】【WAV+CUE】
- 群星.1998-还珠格格·苍天有泪琼瑶大卖连续剧全纪录EP【上华】【WAV+CUE】
- dnf燃烧疲劳值什么意思
- dnf男大枪110版本装备搭配
- dnf畅玩任务系统的限定任务
- 《恶意不息》沃里克打法技巧
- 《恶意不息》属性点数作用介绍