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

【问题标题】：Change colour of progress bar if value is larger than 50 Bootstrap-Vue如果值大于 50，则更改进度条的颜色 Bootstrap-Vue
【发布时间】：2018-09-03 02:39:09
【问题描述】：

尝试使用 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>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案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 ''
  }
}

【讨论】：

【解决方案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 ''
  }
}

【讨论】：

我已将其准确粘贴到我的代码中，但不幸的是它没有奏效。这是 chrome 开发工具显示的内容 Imgur
我已经更新了答案。您可以定义自定义方法来获取变体类型。