CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
Shankar Thiyagaraajan
Shankar Thiyagaraajan

Reputation: 1815

How to use "v-if" and "v-else" in same tag in HTML using Vue JS?

I use Vue js conditional statements in multiple elements.

In some cases, i need to place if and else in same element to filter the elements.

Here,i use multiple elements to apply if and else.

   <block v-if="nb == 3" align="left"></block>
   <block v-if="nb > 3" align="center"></block>

But i want to apply both in single element like,

  <block v-if="nb == 3" align="left" v-else align="center"></block>

Is it possible ?

Or Any other solution to apply this ?

Thank in advance.

Upvotes: 8

Views: 23064

Answers (3)

Joe Clay
Joe Clay

Reputation: 35867

Rather than using v-if, try binding the attribute to a ternary expression.

// : is a shorthand for v-bind:
<block :align="nb == 3 ? 'left' : 'center'"></block>

If that looks a little too messy for you (or if the logic you want to use is too complicated to express in a single line), you could also try creating a computed property in your component that returns "left" or "center", and then bind to that instead.

Upvotes: 27

Olufemi Ayodele
Olufemi Ayodele

Reputation: 407

You could simply achieve that with a ternary operator

<block :align="nb==3?'right':'left'"></block>

Upvotes: 0

darryn.ten
darryn.ten

Reputation: 6983

You can't use v-if and v-else on the same element.

I'd personally use a computed property.

I'm assuming your nb is a reactive variable or similar.

Therefore you should be looking for something like this:

<block v-bind:align="computedAlign"></block>

and then in your component

// assuming you're using data and not props
data() {
  return {
    nb: 1 // default
  }
},
// some other stuff that sets the nb variable in some way
computed: {
  computedAlign() => {
    if (this.nb === 3) {
      return 'left'
    } else {
      return 'center'
    }
  }
}

Upvotes: 7

Related Questions