CODEWITHSUNDEEP
cssdata-bindingvue.jsvuejs2
nagy.zsolt.hun
nagy.zsolt.hun

Reputation: 6694

VueJs - class including constants and dynamic values

I would like to add a constant and a dynamic class to an element in Vue:

<div :class="button {'button-danger':danger}">Button</div>

Class "button" should always be applied, "button-danger" only when property 'danger' is true.

Upvotes: 2

Views: 289

Answers (1)

Bert
Bert

Reputation: 82459

Simple as this.

<div class="button" :class="{'button-danger':danger}">Button</div>

Or 

<div :class="{button: true, 'button-danger':danger}">Button</div>


console.clear()

new Vue({
  el: "#app",
  data:{
    danger: true
  }
})
.button-danger {
  color: red
}
.button {
 border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <div class="button" :class="{'button-danger':danger}">Button</div>
  <div :class="{button: true, 'button-danger':danger}">Second Button</div>
  <button @click="danger = !danger">Toggle</button>
</div>

Upvotes: 3

Related Questions