el-radio-button颜色渲染动态复制
时间: 2023-08-16 09:09:26 浏览: 236
要实现 ElementUI 中的 `el-radio-button` 组件的动态颜色渲染，你可以使用 `:style` 绑定属性来设置按钮的背景颜色。下面是一个示例代码：
```html
<template>
<div>
<el-radio-group v-model="selectedColor">
<el-radio-button
v-for="color in colors"
:key="color.value"
:label="color.label"
:style="{ backgroundColor: color.value }"
>
{{ color.label }}
</el-radio-button>
</el-radio-group>
<div>选中的颜色：{{ selectedColor }}</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedColor: '',
colors: [
{ label: '红色', value: '#FF0000' },
{ label: '绿色', value: '#00FF00' },
{ label: '蓝色', value: '#0000FF' },
],
};
},
};
</script>
```
在这个示例中，我们使用 `v-for` 循环遍历 `colors` 数组，动态生成 `el-radio-button` 组件。通过 `:style` 绑定属性，我们将每个按钮的背景颜色设置为对应的 `color.value` 值。这样，每个按钮就会根据不同的颜色值渲染不同的背景颜色。
当用户选择不同的按钮时，`v-model` 绑定的 `selectedColor` 数据会更新，从而可以获取到用户选择的颜色值。
你可以根据需要调整代码中的颜色数据和样式。希望对你有帮助！
阅读全文
相关推荐
