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

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 ''
  }
}

Answer 2

您需要绑定: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 ''
  }
}

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

2 个答案: