Vue.js类内使用三元表达式：进度条达75%时添加样式

嘿，这个需求很常见，我来帮你轻松搞定！

我们只需要利用Vue的动态class绑定结合三元表达式，就能实现当进度达到75%时自动切换进度条颜色的效果。

直接修改模板实现 #

你原本的进度条代码里，class是静态值，我们需要把它改成Vue的:class（也就是v-bind:class的简写），这样就能根据条件动态添加类名。

进度百分比的计算式是(quoteCount / maxQuotes) * 100，我们直接用这个式子作为判断条件：当百分比≥75%时，添加bg-danger类，否则只保留基础的progress-bar类。

修改后的代码如下：

<div 
  :class="[
    'progress-bar', 
    (quoteCount / maxQuotes) * 100 >= 75 ? 'bg-danger' : ''
  ]" 
  role="progressbar" 
  :style="{width:(quoteCount / maxQuotes) * 100 + '%'}" 
  aria-valuenow="25" 
  aria-valuemin="0" 
  aria-valuemax="100"
> 
  {{quoteCount}} / {{maxQuotes}} 
</div>

更优雅的写法：抽成计算属性 #

如果觉得模板里的计算式有点冗余，还可以把百分比计算逻辑抽成Vue组件的计算属性，让模板更简洁，也方便后续复用这个计算结果：

// 在Vue组件的computed选项中添加
computed: {
  progressPercentage() {
    return (this.quoteCount / this.maxQuotes) * 100;
  }
}

然后模板就可以简化成这样：

<div 
  :class="[
    'progress-bar', 
    progressPercentage >= 75 ? 'bg-danger' : ''
  ]" 
  role="progressbar" 
  :style="{width: progressPercentage + '%'}" 
  aria-valuenow="25" 
  aria-valuemin="0" 
  aria-valuemax="100"
> 
  {{quoteCount}} / {{maxQuotes}} 
</div>

这样代码可读性更高，维护起来也更方便~

内容的提问来源于stack exchange，提问作者foliwe83