Javascript 单击按钮时添加背景色vue js

我正在用VUE JS构建一个应用程序，使用不同的组件

在其中一个按钮中，我有一个按钮，当我点击它时，我想改变它的颜色。这个按钮从表中选择不同的项目，所以当我按下该按钮时，我希望该按钮的背景变为红色，例如，知道我单击了哪些项目

<template>
  <button class="mdc-icon-button material-icons"  @click="doMultiple">delete_outline</button>  
</template>

删除大纲

这是按钮。单击按钮时，如何在那里添加样式

---

提前谢谢

可以使用条件绑定将类动态添加到元素中

Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“应用程序”，
数据：{
删除：错误
},
方法：{
onClick（）{
this.deleteClacked=true；
}
}
})

.red{
背景色：红色；
}

项目
删除

这是我用watch方法将js变量链接到vue js的版本。这是即时的，当您沿颜色选择器拖动光标时会发生更改。检查下面的代码片段。CSS也是必需的。

让vue=新的vue({
el:“视图”，
数据：{
背景：“FFFFFF”，
颜色：“000000”，
},
观察：{
bg:css\u变量\u观察程序（“--bg”），
颜色：css_变量_观察者（“--color”），
},
});
//CSS观察者
函数css\u variable\u watcher（名称，后缀=“”）{
返回{
立即：是的，
处理程序（新值、旧值）{
document.documentElement.style.setProperty（名称、新值+后缀）；
},
};
}

正文{
背景色：var（--bg）；
颜色：var（--颜色）；
}

交换文本和背景色
你好。我是一段。选择第一个输入以更改背景颜色，选择第二个输入以更改文本颜色

请检查Vue类和样式绑定。您可以通过单击该按钮有条件地添加一个类来实现这一点。clickme clicked value最初将为false，并在单击时将其设置为true。@Ramki谢谢，但我尝试了您所说的，它在：class上返回了一个错误，因为它说它需要一个属性值。谢谢，这不完全是我想要的，但这可以帮助我。谢谢皮埃尔！！那最初的课程呢？如何将其保存在元素中？@rjurney您可以同时拥有静态类和动态类

Call the css class with either of the option

.mdc-icon-button material-icons:active{
    background:red;
}
OR

.mdc-icon-button material-icons:focus{
    background:red;
}