vue循环el-button实现点击哪个按钮,那个按钮就变色
更新时间：2023年10月16日 14:40:06 作者：别搞花里胡哨的
这篇文章主要介绍了vue循环el-button实现点击哪个按钮,那个按钮就变色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue循环el-button,点击哪个按钮,那个按钮变色
场景
有多个按钮，一个个的写并且一个个绑定事件代码很冗余，所以就循环，绑定一个事件，传不同的参数即可
实现
我这里有两种button，由于一些原因，“全部”按钮没有放在循环里面
data里面
methods
效果
循环多个＜el-button＞ 如何设置某一个选中
如果您想在一个循环中的多个el-button中选择一个按钮并将其设置为选中状态，可以使用一个变量来标识选中的按钮索引。以下是一种实现方式：
在Vue组件中定义一个selectedButton变量
用于存储选中按钮的索引值：
data() {
return {
selectedButton: -1 // -1 表示没有选中的按钮
}
}使用v-for循环渲染10个el-button
并根据selectedButton变量来设置选中状态：
<el-button v-for="(item, index) in 10" :key="index" :class="{'selected': selectedButton === index}" @click="selectedButton = index">按钮 {{ index }}</el-button>在CSS中定义选中状态的样式
.selected {
background-color: #00ff00; /* 设置选中时的背景色 */
color: #ffffff; /* 设置选中时的文字颜色 */
/* 可以根据需求设置其他样式 */
}这样，当点击某个按钮时，会将相应的索引值赋给selectedButton变量，从而触发样式的改变，实现按钮的选中效果。
如果是一个<Button>则：
/**1.添加一个自定义的类名，并设置选中时的样式：**/
<el-button :class="{'selected': isSelected}" @click="isSelected = !isSelected">按钮</el-button>
/**2. 在CSS中定义选中状态的样式：**/
data() {
return {
isSelected: false
}
}
/**3. 在Vue组件中定义isSelected变量，并初始化为false：**/
.selected {
background-color: #00ff00; /* 设置选中时的背景色 */
color: #ffffff; /* 设置选中时的文字颜色 */
/* 可以根据需求设置其他样式 */
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在现代前端开发中,单页面应用（SPA）越来越受到开发者的青睐,而 Vue.js 作为其中的一个流行框架,提供了丰富的功能来构建用户界面,本文将通过一个基于 Vite + Vue 3 的项目示例,详细介绍如何实现动态路由,有需要的可以参考下2025-10-10
vue2中provide/inject的使用与响应式传值详解
Vue中 Provide/Inject实现了跨组件的通信,下面这篇文章主要给大家介绍了关于vue2中provide/inject的使用与响应式传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue项目配置使用flow类型检查的步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要介绍了详解vue中父子参数传递双向的方式不同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-06-06
本文介绍了五种刷新Vue当前组件的方法：使用location.reload()、路由刷新、v-if或key属性、beforeRouteUpdate导航守卫以及$forceUpdate,每种方法都有其适用场景和优缺点,需要的朋友可以参考下2025-02-02
无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由，渲染相应的404页面。这篇文章主要介绍了Vue单页及多页应用全局配置404页面实践,需要的朋友可以参考下2018-05-05
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
这篇文章主要介绍了vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
下面小编就为大家分享一篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在ElementUI中使用el-date-picker组件获取用户选中的日期值,可以通过v-model双向数据绑定或者监听change事件来实现,需要注意的是,ElementUI可能不支持Vue3,需要使用ElementPlus或其他兼容Vue3的UI库2025-11-11
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能,下面就跟随小编一起来了解一下Vue中混入mixin的实现吧2024-11-11
最新评论