v-if和v-for一起使用

vue2.x 中v-for优先级高于v-if，vue3.x 相反
尽量避免在同一个元素上面同时使用v-if和v-for，建议使用计算属性替代

1、选择性地渲染列表，例如根据某个特定属性来决定是否渲染，使用计算属性computed：
<div
     class="list"
     v-for="(item, index) in finishList"
     :key="index" >
     <div class="name">{{ item.corpName }}</div>
</div>
//JS <<<<<<<<<<<<<<通过计算属性提前把数据处理好再进行渲染
computed: {
    finishList: function () {
      return this.list.filter((item) => {
        return item.status == 1;
      });
    },
  },

2、 避免渲染本该隐藏的列表项，将v-if放到循环列表元素的父元素中或使用template
将v-for渲染的元素包起来，再在template上使用v-if。
//不推荐
<div v-for="item in inHouseList" v-if="isExpired === 1 ">{{item.bar_code}}</div> 
//建议使用
<template v-if="isExpired === 1">
	<div v-for="item in inHouseList"></div>
</template>