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; /* 设置选中时的文字颜色 */
  /* 可以根据需求设置其他样式 */
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-virtual-scroll-list虚拟组件实现思路详解
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-02-02
Vant弹出列表多选输入框下拉选择代码(可直接复制使用)
vue项目无论是用element中的Select选择器,还是使用公司维护的组件,都可以轻松实现单选和多选的需求,这篇文章主要给大家介绍了关于Vant弹出列表多选输入框下拉选择的相关资料,需要的朋友可以参考下
2024-01-01
Vue3动态倒计时的代码实现
在使用Vue框架开发Web应用时,倒计时功能是一个常见的需求,它可以在一定时间内重复执行某些操作,比如防止用户重复提交表单、限制投票次数、实现验证码获取等功能,所以本文给大家介绍了Vue3动态倒计时的代码实现,需要的朋友可以参考下
2024-09-09
vue项目报错Extra semicolon (semi)问题及解决
这篇文章主要介绍了vue项目报错Extra semicolon (semi)问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
关于Vue中的计算属性和监听属性详解
这篇文章主要介绍了关于Vue中的计算属性和监听属性详解,Vue.js模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板内放入过长的或复杂的逻辑时，会让模板过重且难以维护,需要的朋友可以参考下
2023-05-05
vue-router 路由传参用法实例分析
这篇文章主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下
2020-03-03
使用ElementUI中el-upload上传文件转base64格式
这篇文章主要介绍了使用ElementUI中el-upload上传文件转base64格式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
vue.js+element-ui的基础表单实例代码
这篇文章主要介绍了vue.js+element-ui的基础表单实例代码,技术栈即html+vue.js+element-ui,而使用它们的方法也很简单,引入对应的js和css文件即可,需要的朋友可以参考下
2024-03-03
Vue源码分析之虚拟DOM详解
所谓虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新这篇文章主要给大家介绍了关于Vue源码分析之虚拟DOM的相关资料,需要的朋友可以参考下
2021-05-05
Vue开发之watch监听数组、对象、变量操作分析
这篇文章主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
2019-04-04