当出现两个情况的时候,我们可能需要会想到将v-for和v-if同时使用:
- 选择性地渲染列表,例如根据某个特定属性来决定是否渲染
<div v-for="item in itemList" v-if="item.isShow">{{item.value}}</div>
- 避免渲染本该隐藏的列表项
<div v-for="item in itemList" v-if="shouldShowItem">{{item.value}}</div>
事实上,v-for的优先级是高于v-if的,如果两者同时使用,那么v-if会在每一个v-for循环渲染出来的项上作用,造成性能上的浪费。
对于第一种情况,使用计算属性computed:
computed: {
activeItemList: function() {
return this.itemList.filter((item) => {
return item.isActive
})
}
}
<div v-for="item in activeItemList">{{item.value}}</div>
对于第二种情况,将v-if放到循环列表元素的父元素中或使用template
将v-for渲染的元素包起来,再在template
上使用v-if。
<template v-if="shouldShowItem">
<div v-for="item in itemList"></div>
</template>