How to realize the mutually exclusive effect of clicking buttons in vue+elementUI

This article mainly introduces the relevant knowledge of "how to achieve the mutually exclusive effect of clicking buttons in vue+elementUI". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to achieve the mutually exclusive effect of clicking buttons in vue+elementUI" can help you solve the problem.

Let's see the effect of the realization first.

Steps:

One. Html code

{{item.codeValue}}

II. CSS (less) code

.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;} .background-color {background-color: # 8e66f6! important; color: # fff }}

III. Js code

Export default {data () {return {levelList: [{code:', codeValue: 'all'}, {code:', codeValue: 'copper'}, {code:'', codeValue: 'silver'} {code:', codeValue: 'gold'}, {code:', codeValue: 'platinum'}, {code:', codeValue: 'platinum'}], / / Grade screening data itemType: 0 / / the selected identity materialCode:''/ / the code value of the category}}, methods: {/ / rating filter materTay (itemType) Code) {/ / Grade filter selected logo-highlight effect this.itemType = itemType / / classified code value this.materialCode = code} this is the end of the introduction to "how vue+elementUI achieves button-click mutual exclusion". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.