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

Question

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

如何在 vuejs 中做到这一点？

Answer 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>