van-radio-group 选中后label文字变颜色
您可以使用以下方法来实现当 van-radio-group 被选中后,label 文字变颜色的效果:
- 首先,给 van-radio-group 添加一个 v-model 绑定的属性,用于存储选中的值。
<van-radio-group v-model="selectedValue">
<van-radio :label="1">选项1</van-radio>
<van-radio :label="2">选项2</van-radio>
<van-radio :label="3">选项3</van-radio>
</van-radio-group>
- 在 data 中定义 selectedValue 变量,并设置一个默认值。
data() {
return {
selectedValue: 1
};
}
- 在 CSS 中定义一个类,用于改变 label 文字的颜色。
.selected {
color: red;
}
- 使用计算属性来判断是否应该添加这个类。
computed: {
labelClass() {
return this.selectedValue ? 'selected' : '';
}
}
- 修改 label 元素的 class 属性,使用刚才定义的计算属性。
<van-radio-group v-model="selectedValue">
<van-radio :label="1"><label :class="labelClass">选项1</label></van-radio>
<van-radio :label="2"><label :class="labelClass">选项2</label></van-radio>
<van-radio :label="3"><label :class="labelClass">选项3</label></van-radio>
</van-radio-group>
这样,当 van-radio-group 中的某个选项被选中时,对应的 label 元素的文字就会变成红色。
原文地址: https://www.cveoy.top/t/topic/i94S 著作权归作者所有。请勿转载和采集!