当前位置：首页 > VUE

vue实现等级打分

2026-02-19 05:33:38VUE

Vue 实现等级打分功能

使用 v-model 绑定评分值

在 Vue 中可以通过 v-model 双向绑定一个数据属性来存储评分值。例如使用数字 1-5 表示五个等级：

<template>
  <div>
    <span 
      v-for="star in 5" 
      :key="star"
      @click="rating = star"
    >
      {{ star <= rating ? '★' : '☆' }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0
    }
  }
}
</script>

使用组件库实现

Element UI 和 Ant Design Vue 等流行组件库都提供了现成的评分组件：

<!-- Element UI -->
<el-rate v-model="rating"></el-rate>

<!-- Ant Design Vue -->
<a-rate v-model="rating" />

自定义评分组件

创建可复用的评分组件，支持自定义图标、颜色和大小：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars"
      :key="star"
      @click="setRating(star)"
      :class="{ 'active': star <= currentRating }"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentRating: this.initialRating
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
      this.$emit('rating-changed', star)
    }
  }
}
</script>

<style>
.star-rating span {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
}
.star-rating span.active {
  color: gold;
}
</style>

支持半星评分

实现更精确的半星评分功能：

<template>
  <div>
    <span 
      v-for="star in 5"
      :key="star"
      @mousemove="setTempRating(star)"
      @mouseleave="tempRating = 0"
      @click="setFinalRating(star)"
    >
      {{ getStarType(star) }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      tempRating: 0
    }
  },
  methods: {
    setTempRating(star) {
      this.tempRating = star
    },
    setFinalRating(star) {
      this.rating = star
    },
    getStarType(star) {
      if (this.tempRating >= star || (!this.tempRating && this.rating >= star)) {
        return '★'
      }
      return '☆'
    }
  }
}
</script>

添加动画效果

使用 CSS 过渡或动画增强用户体验：

vue实现等级打分

.star-rating span {
  transition: all 0.2s ease;
}
.star-rating span:hover {
  transform: scale(1.2);
}

这些方法提供了从简单到复杂的 Vue 评分实现方案，可根据项目需求选择适合的方式。组件化的实现提高了代码复用性，而自定义功能则可以满足特定的设计需求。

标签: 等级 vue

分享给朋友：

vue实现简单的弹窗

使用 Vue 实现简单弹窗组件基础结构创建一个名为 Modal.vue 的组件文件，包含模板、脚本和样式部分： <template> <div class="mod…

vue实现矩阵

Vue 实现矩阵的方法在 Vue 中实现矩阵操作可以通过多种方式完成，以下是一些常见的方法：使用二维数组表示矩阵矩阵可以用二维数组来表示，每个元素对应矩阵中的一个值。在 Vue 的 data…

vue实现长按

Vue 实现长按功能的方法在 Vue 中实现长按功能可以通过原生事件监听或自定义指令完成。以下是几种常见实现方式：使用原生事件监听通过 @mousedown 和 @mouseup 或 @tou…

vue实现tip

Vue实现Tooltip的方法使用Vue实现Tooltip可以通过多种方式完成，以下是几种常见的方法：使用原生HTML的title属性在Vue模板中直接使用HTML的title属性是最简单的实…

vue 实现hover

Vue 实现 Hover 效果的方法在 Vue 中实现 hover 效果可以通过多种方式完成，以下是几种常见的方法：使用 CSS 伪类 :hover 最简单的方式是直接使用 CSS 的 :hov…

vue实现右滑

Vue 实现右滑功能右滑功能通常用于移动端应用，实现手势操作。以下是几种常见的实现方法：使用 Hammer.js 库 Hammer.js 是一个专门处理手势的库，可以方便地实现右滑功能。 im…

vue实现等级打分