admin管理员组

文章数量:1335138

I'm building an app with VUE JS, using different ponents.

In one of them, I have a button that I would like that change the color when I click on it. This button is choosing different items from a table, so when I press that button I want that the background of that button change to red for example to know which ones I have clicked.

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

This is the button. How can I add there the style when button be clicked?

Thanks in advance!

I'm building an app with VUE JS, using different ponents.

In one of them, I have a button that I would like that change the color when I click on it. This button is choosing different items from a table, so when I press that button I want that the background of that button change to red for example to know which ones I have clicked.

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

This is the button. How can I add there the style when button be clicked?

Thanks in advance!

  • javascript
  • vue.js
  • button
  • vue-ponent
  • background-color
Share Improve this question asked Dec 16, 2019 at 10:25 MultiMulti 231 gold badge1 silver badge4 bronze badges 3
  • 1 Please go through Vue class and style bindings. vuejs/v2/guide/class-and-style.html – Pranav Kale Commented Dec 16, 2019 at 10:32
  • 1 You can do this by adding a class conditionally on click of that button. <button class="mdc-icon-button material-icons" :class="{ bg-red: clicked }">clickme</button> clicked value will be initially false and set it to true on click. – Ramki Commented Dec 16, 2019 at 10:34
  • @Ramki Thanks, but I have tried what you said and it returns me an error on :class because it says that it require an attribute value. – Multi Commented Dec 16, 2019 at 10:58
Add a ment  | 

3 Answers 3

Reset to default 2

You can use conditional binding to dynamically add a class to an element.

https://v2.vuejs/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./ajax/libs/vue/2.5.17/vue.js"></script>

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

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;
}

This is my version of linking js variables to vue js with watch method. This is immediate and will change as you drag the cursor along the color picker. Check the code snippet below. CSS is also required. 

let vue = new Vue({
  el: "#view",
  data: {
    bg: "#FFFFFF",
    color: "#000000",
  },
  watch: {
    bg: css_variable_watcher("--bg"),
    color: css_variable_watcher("--color"),
  },
});
//Watcher for CSS
function css_variable_watcher(name, suffix = "") {
  return {
    immediate: true,
    handler(new_value, old_value) {
      document.documentElement.style.setProperty(name, new_value + suffix);
    },
  };
}
body {
  background-color: var(--bg);
  color: var(--color);
}
<body>
  <div id="view">
    <script src="https://cdn.jsdelivr/npm/vue"></script>
    <input type="color" v-model="bg">
    <input type="color" v-model="color">
    <button type="button" v-on:click="[color, bg] = [bg, color]">Swap Text and Background Color</button>
    <p>Hello. I am a Paragraph. Select the first input to change bg color and second input to change text color.</p>
  </div>
</body>

本文标签： javascriptAdd background color when click a button vue jsStack Overflow

版权声明：本文标题：javascript - Add background color when click a button vue js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742350182a2458332.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。