vue中使用filters过滤器动态设置样式

例如：想根据不同的等级给文字设置不同的样式如(颜色,背景颜色等)

HTML:

<span :class="data.riskLevelNm | risklval"
   v-if="data.riskLevelNm"
   >{{ data.riskLevelNm }}</span>

 使用filters过滤器设置样式：

JS:

 filters: {
    risklval(key) {
      let className
      switch (key) {
        case '高风险': className = 'level'
          break
        case '高风险': className = 'middleHighRisk level'
          break
        case '较高风险': className = 'middleBelowRisk level'
          break
        case '较低风险': className = 'middleRisk level'
          break
        case '低风险': className = 'belowRisk level'
          break
        case '未评估': className = 'noRemark level'
          break
      }
      return className
    }
  }

       根据需求设置不同的css样式:

css:

<style lang="scss" scoped>
.level{
  display: inline-block;
  width: auto;
  max-width: 200px;
  height: 26px;
  line-height: 14px;
  color: #f5222d;
  font-size: 14px;
}
.middleHighRisk{
color: #fb6970;
background-color: #fefefe;
}
.middleBelowRisk{
  color: #03a9f4;
background-color: #e5f4ff;
}
.middleRisk{
color: #fb64fb;
background-color: #fefefe;
}
.belowRisk{
color: #fb699f;
background-color: #fefefe;
}
.noRemark{
color: #fb68fb;
background-color: #fefefe;
}
</style>