使用vue2 elementui 写一个html页面,并修改el-checkbox默认字体颜色
时间: 2024-03-12 13:43:12 浏览: 106
Vue动态生成el-checkbox点击无法赋值的解决方法
5星 · 资源好评率100%
好的,以下是一个简单的例子,使用 Vue2 和 ElementUI 创建一个包含一个 checkbox 的页面,并修改 checkbox 字体颜色:
```html
<template>
<div>
<el-checkbox v-model="isChecked" :style="{ color: checkboxColor }">选项</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
isChecked: false,
checkboxColor: 'red', // 修改 checkbox 字体颜色
};
},
};
</script>
```
在上面的代码中,我们使用了 ElementUI 的 `el-checkbox` 组件,并且使用 `v-model` 指令绑定了一个布尔型的 `isChecked` 变量,来表示 checkbox 是否被选中。
另外,在 `el-checkbox` 组件上,我们使用了 `:style` 属性,来设置 checkbox 的字体颜色。其中,`:style="{ color: checkboxColor }"` 表示使用 `checkboxColor` 变量来设置字体颜色,这个变量的默认值是 `red`,你可以根据需要修改它。
希望这个例子能够帮到你!
阅读全文