How to apply css to the inferior class in Vuejs

Question

I have a html file that works by button in vuejs.
The v-bind:class can be used for one tag like below.
It dissapears depends on the boolean of bool data.

<h3 v-bind:class="{active: bool}">{{counter.document}}</h3>

But my goal is I want to appear and dissapear the inferior class depends on the superior class condition.
How can I make it correctly? Thank you so much for reading.

<div v-bind:class="{active: orderOptions.item.document}">
    <button v-on:click="counter.document -= 1">-</button>
    <h3>{{counter.document}}</h3>
    <button v-on:click="counter.document += 1">+</button>
 </div>

Mohammad Ali Rony · Accepted Answer · 2019-09-24 08:30:27Z

1

Use condition in V-bind:style VueJS:

v-bind:style= "[condition ? {styleA} : {styleB}]"


<div v-bind:style="[orderOptions.item.document ?"active",""]">
    <button v-on:click="counter.document -= 1">-</button>
    <h3>{{counter.document}}</h3>
    <button v-on:click="counter.document += 1">+</button>
 </div>

answered Sep 24, 2019 at 8:30

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply css to the inferior class in Vuejs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related