el-button设置被选中状态
时间: 2023-10-03 15:04:51 浏览: 230
el-button可以通过设置属性来实现被选中状态,比如可以设置el-button的type属性为primary,表示该按钮是主要按钮,被选中状态时颜色会加深;也可以设置el-button的active属性为true,表示该按钮处于活动状态,被选中时会显示为深色。以下是示例代码:
```
<template>
<div>
<el-button type="primary" :class="{ active: isActive }" @click="toggleActive">
{{ isActive ? '已选中' : '未选中' }}
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isActive: false
}
},
methods: {
toggleActive() {
this.isActive = !this.isActive
}
}
}
</script>
<style>
.active {
background-color: #409EFF;
color: #fff;
}
</style>
```
在上面的示例代码中,我们首先定义了一个el-button,设置了其type属性为primary,表示该按钮是主要按钮;然后我们使用了:class绑定了一个active类,该类的样式会在按钮被选中时生效;最后我们定义了一个toggleActive方法,用于切换按钮的选中状态。在样式中,我们定义了.active类的样式,当按钮被选中时,该样式会生效,使得按钮的背景颜色和字体颜色发生变化。