vue-:class的几种使用方式
1.方法方式其实,一开始我想实现动态拼接的效果(:class="['icon-level' + item.oppGrade.toLowerCase]")这样子,但是不行。于是,我用了计算属性,发现也不行,因为这个class需要参数支持,computed做不到。只能用方法了,而且用方法的时候,不能用[]把常量和方法写一起,我试过了的,写一起,常量的class会失效。方法实现方式如下:1) HTML文
·
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,
还没写完,后续补充。。。
更多推荐
已为社区贡献8条内容
所有评论(0)