如何通过Vue.js动态控制CSS实现星级评分颜色高亮？

嘿，这个需求其实挺常见的，我来帮你搞定它！下面是调整后的完整实现方案，能根据后端返回的星级数字自动高亮对应数量的星星：

完整实现代码 #

<template>
  <div id="app">
    <!-- 循环生成5颗星星，根据rating动态切换颜色 -->
    <span 
      v-for="(star, index) in 5" 
      :key="index"
      class="star"
      :class="{ 'star-highlight': index < rating }"
    >
      &#9733;
    </span>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      rating: 3 // 这里先默认设为3，实际项目替换成后端返回的数值即可
    }
  },
  mounted() {
    // 模拟从后端获取星级数据的过程
    // 实际项目里替换成你的接口请求，比如：
    // axios.get('/api/get-rating').then(res => { this.rating = res.data })
    setTimeout(() => {
      this.rating = 4 // 模拟后端返回4星的情况
    }, 1000)
  }
}
</script>

<style scoped>
.star {
  font-size: 28px;
  color: #e0e0e0; /* 默认灰色星星 */
  margin-right: 6px;
}

.star-highlight {
  color: #ffd700; /* 高亮的黄色星星 */
}
</style>

核心逻辑解释 #

• 动态生成星星：用v-for循环生成5颗星星，避免硬编码，后续如果要调整星星总数，只需要修改循环的数字就行
• 条件绑定样式：通过:class="{ 'star-highlight': index < rating }"做判断——星星的索引从0开始，当索引小于当前星级数值时，就添加强高亮样式类
• 对接后端数据：在mounted钩子中模拟了接口请求的过程，实际开发时你只需要把模拟代码换成真实的接口调用，拿到后端返回的星级数字后赋值给rating即可
• 样式自定义：默认星星设为浅灰色，高亮时切换成金黄色，你可以根据需求调整字体大小、颜色值和星星间距

这样不管后端返回1-5中的哪个数字，对应的前N颗星星都会自动变成黄色，剩下的保持默认灰色，完全符合你的需求！

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