Conditionally using a css class in Vue

Question

I want it to use CSS style of margin-top = 5vh and margin-bottom = 7vh when displayConfig.minCard is true and and margin-top = 9vh and margin-bottom = 9vh when displayConfig.minCard is false

  .workflowSelectionMin{
    margin-top: 5vh;
    margin-bottom: 7vh;
  }

  .workflowSelection{
    margin-top: 9vh;
    margin-bottom: 9vh;
  }

I'm trying to use the v-bind to try to conditionally pick the css style but it seems like it's not working.

<div class="md-layout md-gutter  md-alignment-center-center" v-bind:style= "[displayConfig.minCard ? {workflowSelectionMin} : {workflowSelection}]">

tony19 · Accepted Answer · 2022-07-16 01:00:08Z

1

You can just do

<div :class="[ displayConfig.mindCard ? 'workflowSelectionMin' : 'workflowSelection', 'md-layout', 'md-gutter', 'md-alignment-center-center' ]">

Take a look at the array syntax

edited Jul 16, 2022 at 1:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 20, 2019 at 14:08

sebasaenz

1,9662 gold badges23 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Conditionally using a css class in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related