徽章使用vuejs更改颜色状态[关闭]

Posted 2023-02-16

【中文标题】徽章使用vuejs更改颜色状态[关闭]

【英文标题】：Badge change color status with vuejs [closed]

【发布时间】：2022-01-19 16:58:52

【问题描述】：

我想更改此徽章状态的颜色：<li>Status: <b-badge variant="warning">contract.status</b-badge></li> 我有四种状态：待定、过期、拒绝和确认。 现在它以黄色待定，当它被拒绝或过期时以红色，当它以绿色确认时。

如何在 vuejs 中做到这一点？

【参考方案1】：

你应该考虑这样的事情：

const app = new Vue(
  el: '#app',
  data: 
    contracts: [
       value: '1', status: 'Pending', color: 'yellow' ,
       value: '2', status: 'Expired', color: 'red' ,
       value: '3', status: 'Declined', color: 'red' ,
       value: '4', status: 'Confirmed', color: 'green' ,
    ]
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="contract in contracts" :key="contract.value">
        <div>contract. value Status:
            <span :style="`backgroundColor: $contract.color`">contract.status</span>
        </div>
    </div>
</div>

【讨论】：

感谢 Shaya，但我已经从 API 获取了状态