使用vue的情况下 如何维护多个按钮 如下面代码

Question

在实际开发中可能按钮文字 color type 都是动态的 如果不用jsx如何维护呢我希望是用一个数组 来维护渲染通过订单状态来显隐之类的
<van-button v-if="orderStatus===5 || orderStatus===4" plain round type="info">删除订单</van-button>
<van-button v-if="orderStatus===3 && deliveryType===2" plain round type="info">确认收货</van-button>
<van-button v-if="orderStatus===3 && deliveryType===1" plain round type="info">提货二维码</van-button>
<van-button v-if="orderStatus===4 || orderStatus===3 && deliveryType===2" plain round type="info">查看物流</van-button>
<van-button v-if="orderStatus===1" plain round type="info">取消订单</van-button>
<van-button v-if="orderStatus===1" plain round type="info">付款</van-button>

Answer 1

computed: {
  btnList () {
    const list = []
    if (orderStatus == 1) {
        list.push('付款', '取消订单')
    }
    return list
  }
}