class样式根据不同的文字内容进行切换

  
html:
<div :class="merchantPlatform === 'Merchant'
                        ? 'coupon-left-top-s'
                        : 'coupon-left-top-p'
                    ">
                    {{ merchantPlatform }}
                  </div>

script:
data(){
    return {
        merchantPlatform ：‘Merchant’
    }
}

css:
        .coupon-left-top-s {
          width: 69px;
          height: 18px;
          line-height: 18px;
          background: rgba(242, 72, 81, 0.46);
          border-radius: 2px;
          font-size: 12px;
          text-align: center;
          color: #f24c55;
        }
        .coupon-left-top-p {
          width: 64px;
          height: 18px;
          line-height: 18px;
          background: rgba(210, 122, 6, 0.46);
          border-radius: 2px;
          font-size: 12px;
          opacity: 30;
          text-align: center;
          color: #d27a06;
        }