这篇文章主要为大家详细介绍了vue+elementUI实现点击按钮互斥效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+elementUI实现点击按钮互斥的具体代码，供大家参考，具体内容如下
先看看实现的效果吧！
步骤：
一.html代码
{{ item.codeValue }}
二.css(less)代码
.level-screening { padding-left: 40px; box-sizing: border-box; height: 120px; text-align: left; line-height: 80px; .el-button { border-color: #0085f4; background-color: #fff; color: #0085f4; } .highlight { background-color: #8e66f6 !important; color: #fff; } }三.js代码
export default { data() { return { levelList: [ { code: '', codeValue: '全部' }, { code: '', codeValue: '铜' }, { code: '', codeValue: '银' }, { code: '', codeValue: '金' }, { code: '', codeValue: '白金' }, { code: '', codeValue: '铂金' } ], // 等级筛选数据 itemType: 0, // 等级筛选选中的标识 materialCode: '' // 分类的code值 } }, methods: { // 等级筛选互斥效果 materTay(itemType, code) { // 等级筛选选中的标识-高亮效果 this.itemType = itemType // 分类的code值 this.materialCode = code } } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是vue+elementUI实现点击按钮互斥效果的详细内容，更多请关注0133技术站其它相关文章！
