javascript - 单击按钮时添加背景颜色vue js

Question

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

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

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

这是按钮。单击按钮时如何添加样式？

提前致谢!

Answer 1

您可以使用条件绑定(bind)将类动态添加到元素。

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: "#app",
  data: {
    deleteClicked: false
  },
  methods: {
    onClick() {
      this.deleteClicked = true;
    }
  }
})

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div :class="{ red : deleteClicked }">
    Item
    <button @click="onClick">
      Delete
    </button>
  </div>
</div>