vue实现等级选择
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>使用单选框实现等级选择
通过单选框组实现互斥选择，适合少量等级选项：
<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星），可使用第三方库或自定义组件：
<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>关键实现要点
- 数据驱动：所有等级选项应存储在
data中，便于维护和扩展 - 双向绑定：使用
v-model同步用户选择与组件状态 - 视觉反馈：通过动态类名或样式反映当前选中状态
- 事件处理：必要时通过
@change或@input监听选择变化
根据具体场景选择合适的方式，简单等级选择可用原生表单控件，复杂交互建议使用专门组件库。
