el-button点击后选中常亮
时间: 2023-07-06 17:10:12 浏览: 384
您可以使用 `el-button` 的 `:class` 属性和 `:disabled` 属性来实现这个功能。具体实现步骤如下:
1. 在 `el-button` 上绑定一个选中状态的变量,例如 `isSelected`,初始值为 `false`。
2. 使用 `:class` 属性来绑定一个样式类,例如 `selected`,当 `isSelected` 为 `true` 时添加该样式类,为 `false` 时移除该样式类。
3. 使用 `:disabled` 属性来将按钮禁用,当 `isSelected` 为 `true` 时禁用按钮,为 `false` 时启用按钮。
下面是一个示例代码:
```html
<template>
<div>
<el-button :class="{ selected: isSelected }" :disabled="isSelected" @click="toggleSelected">点击选中</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isSelected: false
};
},
methods: {
toggleSelected() {
this.isSelected = !this.isSelected;
}
}
};
</script>
<style>
.selected {
background-color: #eee;
color: #333;
}
</style>
```
当点击按钮时,`toggleSelected` 方法会将 `isSelected` 的值取反,从而实现选中状态的切换。同时,`el-button` 的 `:class` 属性会根据 `isSelected` 的值来添加或移除 `selected` 样式类,`el-button` 的 `:disabled` 属性也会根据 `isSelected` 的值来禁用或启用按钮。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)