Vue.js 中使用最多的两个指令就是 v-if
和 v-for
,因此我们可能会想要同时使用它们。虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式:
- 在 vue 2.x 中,在一个元素上同时使用
v-if
和v-for
时,v-for
会优先作用。 - 在 vue 3.x 中,
v-if
总是优先于v-for
生效。
对比学习
接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果:
我们有一个 todoList:
const todoList = [ { id: 0, task: '吃饭', done: true, }, { id: 1, task: '睡觉', done: false, }, { id: 2, task: '洗澡', done: true, }, // ..., ];
在 vue2 中, v-for
优先级高于 v-if
,我们可以这样实现:
<ul> <!-- vue2中,v-for优先级高于v-if --> <li v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :key="item.id"> <span>{{item.task}}</span> </li> </ul> <ul> <li v-for="item in todoList" v-if="item.done" :class="{finished: item.done}" :key="item.id"> <span>{{item.task}}</span> </li> </ul>
在 vue3 中,由于 v-if
优先级要高于 v-for
,所以不能像 vue2 那样将 v-for
和 v-if
放在同一个元素上,我们在 li
外面套一层用来执行 for 循环:
<ul> <template v-for="item in list" :key="item.id"> <li v-if="!item.done" :class="{todo: !item.done}"> <span>{{item.task}}</span> </li> </template> </ul> <ul> <template v-for="item in list" :key="item.id"> <li v-if="item.done" :class="{finished: item.done}"> <span>{{item.task}}</span> </li> </template> </ul>
可以看出,如果在 vue2.x 中 v-if
和 v-for
在同一个元素上使用是无法直接在 vue3.x 中兼容的。
最佳实践
针对 v-if
和 v-for
的使用,其实官方是建议我们使用计算属性来处理的,这样既提高了性能,又可以兼容到 vue3.x,接下来我们看看计算属性实现方式:
模板部分:
<div id="app"> <!-- 最佳实践 --> <ul class="todo-list"> <li v-for="item in todos" class="todo" :key="item.id"> <span>{{item.task}}</span> </li> </ul> <ul v-if="showFinished"> <li v-for="item in finished" :key="item.id" class="finished"> <span>{{item.task}}</span> </li> </ul> <p> show finished? <input type="checkbox" v-model="showFinished" /> {{showFinished "htmlcode">// vue3.x Vue.createApp({ data() { return { msg: 'Todo List', showFinished: true, list: todoList, }; }, computed: { finished() { return todoList.filter(t => t.done); }, todos() { return todoList.filter(t => !t.done); }, }, }).mount('#app'); // vue2.x new Vue({ el: '#app', data() { return { msg: 'Todo List', showFinished: true, list: todoList, }; }, computed: { finished() { return todoList.filter(t => t.done); }, todos() { return todoList.filter(t => !t.done); }, }, });点击查看: vue3示例 、vue2示例
总结
- vue2.x 中
v-for
优先级高于v-if
,vue3.x 相反;- 尽量避免在同一个元素上面同时使用
v-if
和v-for
,建议使用计算属性替代。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位置大全
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-9
- MatteoPasqualini-JohannSebastianBachItalienischesKonzertFranzsischeOuvertureVierDue
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+CUE]
- 《黑神话》纪录片9月20日上线!揭秘关卡为何删减
- 游戏科学估值已和育碧市值相当:后者有两万多名员工
- 黑神话第81周目Boss伤害有多恐怖?起手伤害直接秒
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】
- 群星.1993-烧得厉害VOL.1好戏好歌唱不停【滚石】【WAV+CUE】
- 那英《幸福的泪 磁性和爆发力完美展现 2CD》[WAV/分轨][600MB]
- 《宝丽金辉煌60年 女人篇3CD》[WAV+CUE][1.5G]
- 《年度十大发烧唱片精选 唱片榜获奖作品 2CD》[WAV/分轨][1GB]
- 归龙潮三枚天灯碎片位置在哪 笼律鸟任务天灯图文位置
- 归龙潮新手开荒阵容怎么搭配 新手前期阵容养成攻略