当你根据接口中的数据状态来渲染时该怎么渲染

在vue3中，当我们用到一个数组的时候，比如array，用其渲染的时候，其中，有一项时根据状态要求渲染的时候，我们可以根据computed的计算属性来其进行过滤并返回一个新的数组。
以下时部分代码示例：

<van-tabs v-model:active="active" class="label_Page">
      <van-tab title="全部">
        <div class="card" v-for="item in array" :key="item.id">
          <div class="card_title">
            <p>{{ item.scenic_name }}</p>
            <div>
              {{
                item.status === 1
                  ? "交易完成"
                  : item.status === 2
                  ? "待支付"
                  : item.status === 3
                  ? "已取消"
                  : item.status === 4
                  ? "已支付"
                  : item.status === 5
                  ? "已退款"
                  : "未知状态"
              }}
            </div>
          </div>
          <div class="card_all">
            <div class="card_img">
              <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" />
            </div>
            <div class="card_particulars">
              <div class="particulars_ticket">
                <div>{{ item.name }}</div>
                <p>￥{{ item.total_price }}</p>
              </div>
              <div class="particulars_item">
                <div>{{ item.create_time }}</div>
                <p>×1</p>
              </div>
              <div class="particulars_img">
                <div>数量:{{ item.number }}</div>
                <img src="../assets/12316231.png" alt="" />
              </div>
            </div>
          </div>
          <div class="operation">
            <div>删除订单</div>
            <div>再次购买</div>
            <div>去评价</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="交易完成">
        <div class="card" v-for="item in filteredArray" :key="item.id">
          <div class="card_title">
            <p>{{ item.scenic_name }}</p>
            <div>{{ "交易完成" }}</div>
          </div>
          <div class="card_all">
            <div class="card_img">
              <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" />
            </div>
            <div class="card_particulars">
              <div class="particulars_ticket">
                <div>{{ item.name }}</div>
                <p>￥{{ item.total_price }}</p>
              </div>
              <div class="particulars_item">
                <div>{{ item.create_time }}</div>
                <p>×1</p>
              </div>
              <div class="particulars_img">
                <div>数量:{{ item.number }}</div>
                <img src="../assets/12316231.png" alt="" />
              </div>
            </div>
          </div>
          <div class="operation">
            <div>删除订单</div>
            <div>再次购买</div>
            <div>去评价</div>
          </div>
        </div>
      </van-tab>
 </van-tabs>

// 交易完成
const filteredArray = computed(() => {
  return array.value.filter((item) => item.status === 1);
});

以上就是根据want的Tab标签页的状态里进行渲染的，希望对大家有帮助