vue通过返回值改变文字颜色

1,759 阅读1分钟
<template>
<i :style="classObje(heaithData.GradeNum)" >{{heaithData.GradeText}}</i>
</template>
data() {
  return {
      heaithData:{
          GradeNum:20,
          GradeText:'','
    },
  }
 },
 computed: {
  classObje() {//根据值变化字体颜色            
    return (GradeNum) => {// 使用JavaScript闭包,进行传值操作
      console.log(GradeNum)
      if (GradeNum >= 0 && GradeNum <= 20 ){
          return {'color':'rgba(253, 70, 40, 1)'}
      } 
      else if (GradeNum > 20 && GradeNum <= 80){
          return {'color':'rgba(63, 146, 236, 1)'}
      } 
      else if (GradeNum > 80 && GradeNum <= 100){
          return {'color':'rgba(29, 138, 27, 1)'}
      }   
    }
  }
},