当前位置：首页 > VUE

vue实现等级选择

2026-02-10 18:00:13VUE

Vue 实现等级选择的方法

使用 `v-for` 动态渲染等级选项

通过 v-for 指令动态生成等级选项，结合 v-model 实现双向绑定：

<template>
  <div>
    <label>选择等级：</label>
    <select v-model="selectedLevel">
      <option v-for="level in levels" :key="level.value" :value="level.value">
        {{ level.label }}
      </option>
    </select>
    <p>当前等级：{{ selectedLevel }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levels: [
        { value: 1, label: '初级' },
        { value: 2, label: '中级' },
        { value: 3, label: '高级' }
      ],
      selectedLevel: 1
    }
  }
}
</script>

使用单选框实现等级选择

通过单选框组实现互斥选择，适合少量等级选项：

vue实现等级选择

<template>
  <div>
    <label>选择等级：</label>
    <div v-for="level in levels" :key="level.value">
      <input 
        type="radio" 
        :id="'level' + level.value" 
        :value="level.value" 
        v-model="selectedLevel"
      >
      <label :for="'level' + level.value">{{ level.label }}</label>
    </div>
    <p>当前等级：{{ selectedLevel }}</p>
  </div>
</template>

使用星级评分组件

对于可视化等级选择（如1-5星），可使用第三方库或自定义组件：

vue实现等级选择

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

<script>
export default {
  data() {
    return {
      selectedRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.selectedRating = star
    }
  }
}
</script>

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

使用滑块控件（Slider）

通过范围滑块实现连续或离散的等级选择：

<template>
  <div>
    <input 
      type="range" 
      min="1" 
      max="10" 
      v-model="level" 
      @input="updateLevel"
    >
    <p>当前等级：{{ level }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      level: 5
    }
  },
  methods: {
    updateLevel() {
      console.log('等级更新为：', this.level)
    }
  }
}
</script>

使用第三方组件库

例如使用 Element UI 的 Rate 组件：

<template>
  <el-rate v-model="rating" :max="5" show-text :texts="['差', '一般', '好', '优秀', '极佳']"/>
</template>

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