Vue binding class problem

the requirement is the background color of the small button is gray by default, and it needs to be consistent with the background color of the big button when clicked. Click which to bind class. The problem now is that there is a color by default. The
clipboard.png

clipboard.png
code is as follows. KongTou is a Boolean type:
large button label:

20X</el-button>

Mar.31,2021

has been resolved.
HTML:
< el-button class= "high-light": class= "kongTou? {bgGreen: isBg = ='a'}: {bgRed: isBg = ='a'}" @ click= "selected ('a')" > 10X < / el-button >
< el-button class= "high-light": class= "kongTou? {bgGreen: isBg = ='b'}: {bgRed: isBg = ='b'}" @ click= "selected ('b')" > 20X < / el-button >

JS:
selected (x) {

this.isBg = x;

},

write it this way


feels like you're getting complicated.
add a loop when you click directly, first remove the color of all the buttons, and then add the color you want to the object you click. The small button is the same as


your logic is either green or red

20X</el-button>

should also add the condition of whether it is selected or not

Menu