如何根据level变量切换FontAwesome五星样式（避免重复代码）

你可以用Vue的v-for循环动态生成5个星星图标，不用重复编写标签，同时根据level值判断每个星星的样式，具体实现如下：

完整代码 #

<template>
    <div id="five-stars">
      <!-- 循环生成5个星星元素 -->
      <font-awesome-icon 
        v-for="(_, index) in 5" 
        :key="index"
        :icon="`fa-${index + 1 <= level ? 'solid' : 'regular'} fa-star`" 
        size="6x"
      />
    </div>
</template>

<script>
export default {
  name: "ThreeScene",
  data() {
    return {
      level: 1 // 取值范围0-5
    };
  }
}
</script>

代码说明 #

• 用v-for="(_, index) in 5"循环生成5个星星，index为当前元素的索引（从0开始）
• 通过三元表达式index + 1 <= level ? 'solid' : 'regular'判断样式：当星星的序号（index+1，范围1-5）小于等于level时，使用实心的solid样式，否则用空心的regular样式
• 用:icon动态绑定拼接好的图标类名，实现样式切换
• 给每个循环元素添加:key="index"，符合Vue列表渲染的规范

当level设为3时，会显示3个实心星星+2个空心星星；设为0则全空心，设为5则全实心，完全匹配需求。

内容的提问来源于stack exchange，提问作者Bilal