使用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
  }
}

Answer 2

https://codepen.io/jamesfancy...

const allButons = [
    { label: "删除订单", type: "info", predicate: o => [4, 5].includes(o.orderStatus) },
    { label: "确认收货", type: "info", predicate: o => o.orderStatus === 3 && o.deliveryType === 2 },
    { label: "提货二维码", type: "info", predicate: o => o.orderStatus === 3 && o.deliveryType === 1 },
    { label: "查看物流", type: "info", predicate: o => [3, 4].includes(o.orderStatus) && o.deliveryType === 2 },
    { label: "取消订单", type: "info", predicate: o => o.orderStatus === 1 },
    { label: "付款", type: "info", predicate: o => o.orderStatus === 1 },
]

export default {
    methods: {
        getButtons(item) {
            return allButons.filter(button => button.predicate(item));
        }
    }
}