当前位置：首页 > VUE

vue实现等级选择

2026-01-14 01:19:45VUE

Vue 实现等级选择的方法

使用 v-for 渲染等级选项

通过 v-for 循环生成等级选项，结合 v-model 实现双向绑定。

<template>
  <div>
    <div v-for="n in 5" :key="n" @click="selectLevel(n)">
      <span :class="{ 'active': n <= selectedLevel }">★</span>
    </div>
    <p>当前选择: {{ selectedLevel }}星</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedLevel: 0
    }
  },
  methods: {
    selectLevel(level) {
      this.selectedLevel = level
    }
  }
}
</script>

<style>
.active {
  color: gold;
}
</style>

使用第三方组件

可以集成现成的评分组件如 vue-star-rating：

npm install vue-star-rating

<template>
  <star-rating v-model="rating" :increment="0.5" :star-size="30"/>
</template>

<script>
import StarRating from 'vue-star-rating'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 3
    }
  }
}
</script>

自定义 SVG 图标

使用 SVG 实现更灵活的样式控制：

<template>
  <div class="rating-container">
    <svg v-for="i in 5" :key="i" @click="setRating(i)" width="24" height="24">
      <polygon 
        :points="getStarPoints(12, 12, 10, i)" 
        :fill="i <= currentRating ? '#FFD700' : '#DDD'"
      />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0
    }
  },
  methods: {
    setRating(rating) {
      this.currentRating = rating
    },
    getStarPoints(cx, cy, r, n) {
      // 生成五角星坐标点的算法
    }
  }
}
</script>

结合 Element UI 组件

如果使用 Element UI 框架：

vue实现等级选择

<template>
  <el-rate v-model="value" :colors="colors" :texts="texts" show-text/>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      texts: ['差', '一般', '好']
    }
  }
}
</script>