vue实现单选选中变色
实现单选选中变色的方法
在Vue中实现单选选中变色可以通过多种方式完成，以下是几种常见的实现方法：
方法一：使用v-model绑定和动态class
通过v-model绑定单选按钮的值，结合动态class根据选中状态改变样式。
<template>
<div>
<label
v-for="option in options"
:key="option.value"
:class="{ 'active': selectedOption === option.value }"
>
<input
type="radio"
v-model="selectedOption"
:value="option.value"
>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
}
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>方法二：使用计算属性
通过计算属性判断当前是否选中，返回对应的样式类名。
<template>
<div>
<label
v-for="option in options"
:key="option.value"
:class="getClass(option.value)"
>
<input
type="radio"
v-model="selectedOption"
:value="option.value"
>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
},
methods: {
getClass(value) {
return this.selectedOption === value ? 'active' : ''
}
}
}
</script>方法三：使用CSS伪类选择器
利用CSS的:checked伪类选择器直接样式化选中的单选按钮。
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="radio"
v-model="selectedOption"
:value="option.value"
class="radio-input"
>
<span>{{ option.label }}</span>
</label>
</div>
</template>
<style>
.radio-input:checked + span {
background-color: #42b983;
color: white;
}
</style>方法四：使用Vue的样式绑定
通过Vue的样式绑定直接修改元素的样式属性。
<template>
<div>
<label
v-for="option in options"
:key="option.value"
:style="selectedOption === option.value ? activeStyle : {}"
>
<input
type="radio"
v-model="selectedOption"
:value="option.value"
>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
activeStyle: {
backgroundColor: '#42b983',
color: 'white'
},
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
}
}
</script>注意事项
- 确保样式选择器有足够的特异性，避免样式被覆盖
- 考虑添加过渡效果提升用户体验
- 对于复杂的样式需求，可以考虑使用CSS预处理器如Sass/Less
- 在移动端使用时，可能需要调整点击区域大小
以上方法可以根据实际项目需求选择使用，方法一和方法二是最常见和推荐的方式。
