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.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】