如果值大于 50 Bootstrap-Vue，则更改进度条的颜色

Question

尝试使用 v-bind 动态更改进度条的颜色（不必使用它）。这是我的代码：

<b-progress height={} v-model="item.value.value" class="progress-xs" variant="{ 'success': item.value.value > 50,  'warning': item.value.value > 30, 'danger': item.value.value > 10}"></b-progress>

Answer 1

您需要绑定 :variant 并定义自定义方法以获取变体类型：

<b-progress 
  height={} 
  v-model="item.value.value" 
  class="progress-xs" 
  :variant="getVariantType(item)">
</b-progress>

methods: {
  getVariantType: function(item) {
    if (item.value.value > 50) {
      return 'success'
    } else if (item.value.value > 30) {
      return 'warning'
    } else if (item.value.value > 10) {
      return 'danger'
    }
    return ''
  }
}

Answer 2

ittus 的答案非常接近，但对我不起作用。我能够通过动态设置颜色而不是变体来让它工作，这似乎不是 progress property

<b-progress 
  height={} 
  v-model="item.value.value" 
  class="progress-xs" 
  :color="getColor(item)">
</b-progress>

methods: {
  getColor: function(item) {
    if (item.value.value > 50) {
      return 'green'
    } else if (item.value.value > 30) {
      return 'yellow'
    } else if (item.value.value > 10) {
      return 'red'
    }
    return ''
  }
}

如果值大于 50 Bootstrap-Vue，则更改进度条的颜色

Change colour of progress bar if value is larger than 50 Bootstrap-Vue

vue.js

bootstrap-vue