1.方法方式

其实,一开始我想实现动态拼接的效果(

:class="['icon-level' + item.oppGrade.toLowerCase]"

)这样子,但是不行。于是,我用了计算属性,发现也不行,因为这个class需要参数支持,computed做不到。只能用方法了,而且用方法的时候,不能用[]把常量和方法写一起,我试过了的,写一起,常量的class会失效。方法实现方式如下:

1) HTML文件:

<em class="dossc-icon-size" :class="oppGradeDoss(item.oppGrade)"></em>

2) .VUE文件:
 methods: {
   oppGradeDoss(val){
     if(val){
       return "icon-level"+(val.toLowerCase())
     }
   }
 }

3) .SCSS文件:
$icons-icon-list:
  icon-levela,
  icon-levelb,
  icon-levelc,
  icon-levelf,
  icon-levelh,
  icon-leveln,
还没写完,后续补充。。。
Logo

前往低代码交流专区

更多推荐