如何在 VueJS 中更改徽章状态颜色答案

【问题标题】：如何在 VueJS 中更改徽章状态颜色
【发布时间】：2022-01-20 07:09:02
【问题描述】：

我想更改徽章状态<li>Status: <b-badge variant="warning"> {{contract.status}} </b-badge></li> 的颜色，默认情况下颜色为黄色，因为它处于待处理状态，但当它确认时它将为绿色，而当它过期或被拒绝时为红色。合约状态取自 API，如何在 VueJS 中更改颜色？

这是我的代码：

<div v-if="teammate.contracts.length !== 0" v-for="contract in teammate.contracts" >
    <h6>Contract</h6>
    <li>Status: <b-badge variant="warning"> {{contract.status}}</b-badge></li>           
    <li>Working time: {{contract.contract_data.hiring_contract_time}}</li>
    <li> Hiring type: {{contract.contract_data.hiring_type}}</li>
    <li> Hired by: {{contract.contract_data.contract_project_type}}</li>
</div>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

一个好的方法是将变体类型实现为相应变化的计算属性

variant() {
    if (status == 'confirmed') {
        return 'success';
    } else if (status === 'declined') {
        return 'error';
    } else {
        return 'warning';
    }
}

您必须根据您的用例进行调整。

然后你可以像这样在你的模板中使用这个计算属性

<b-badge :variant="variant"> {{contract.status}} </b-badge>

【讨论】：