在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标签页的状态里进行渲染的,希望对大家有帮助