当v-if和v-for需要同时使用的时候

当使用v-for的时候需要选择性地隐藏部分item
本来的错误写法是这样：

 <div class="card-view-item" v-for="(item,index) in cardList" :key="index" v-if="item.show"> </div>

在data里声明的cardList

  cardList:[
        {
    
          title:'夜间睡眠',
          time:'12/1',
          show:true,
        },
        {
    
          title:'步数和热量',
          time:'12/1',
          show:false,
        },
      ]

以上的那种用法是错误的。v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。

下面是正确用法：
我们可以利用computed：

computed: {
    
	activeItemList: function() {
    
		return this.cardList.filter((item) => {
    
			return item.show
		})
	}
}

 <div class="card-view-item" v-for="(item,index) in activeItemList" :key="index" > </div>

这样就可以了