vue中v-for循环使用:class伪类判断颜色

html添加:class判断：

<div 
    :class="['triangle-topleft', num == 1 ? 
    'red' : num == 2 ? 'blue' : 'green']">
</div>

css代码如下：

.triangle-topleft{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    height: 20px;
    width: 100%;
    &.red{
      border-top: pxTorem(18px) solid #DA5050;
      border-right: pxTorem(18px) solid transparent;
      background-image: linear-gradient(#e66465, #9198e5);
    }
    &.blue{
      border-top: pxTorem(18px) solid #0066ED;
      border-right: pxTorem(18px) solid transparent;
      background-image: linear-gradient(#e66465, #9198e5);
    }
    &.green{
      border-top: pxTorem(18px) solid #038632;
      border-right: pxTorem(18px) solid transparent;
      background-image: linear-gradient(#e66465, #9198e5);
    }
  }