0
点赞
收藏
分享

微信扫一扫

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

沈芏 2022-03-11 阅读 45
csscss3html
  
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;
        }
举报

相关推荐

绑定样式(class)

0 条评论