Vue.js 如何改变孩子的颜色

请告诉我如何使用Vue.js和/或SCSS工具来实现逻辑。根据子div的级别（数据级别-从1到6），颜色会发生变化。jQuery中有一个实现的示例

.ui核心技能{
显示器：flex；
对齐项目：居中；
}
.ui核心技能名称{
浮动：左；
边际：0 7px 0；
}
.ui核心技能水平{
显示器：flex；
对齐项目：居中；
.dot max{
高度：9px；
宽度：9px；
浮动：左；
边界半径：50%；
保证金：0 5px 0 5px；
}
.dot mid{
高度：7px；
宽度：7px；
@扩展.dot-max；
}
.dot min{
高度：5px；
宽度：5px；
@扩展.dot-max；
}
}

名称

仅使用SCS的最简单解决方案是对每个级别执行以下操作：

/*Your old scss goes above here*/

.ui-core-skill-level[data-level="4"] {
   .dot{
     &-max{
        background-color: rgba(238, 122, 71, 1);
     }

     &-mid{
        background-color: rgba(238, 122, 71, 1);
     }

     &-min{
        background-color: rgba(238, 122, 71, .3);
     }
   }
}

---

Vue尝试的代码是什么？