Add more than one v-if with different conditions for one div without duplicate?

Question

I've div Vue with more than one different if condition, there is way to add more than one v-if in one <div>,

Something like that

<div v-if="any" v-if="another-any">
</div>

I saw this but working as a and condition, not another condition

<div v-if="any && another-any">
</div>

And also I saw OR condition

<div v-if="any || another-any">
</div>

But there are 2 or more different conditions in one div?

The `v-if` directive works pretty much the same way a regular javascript `if` statement works. If you want to add more than two conditions to the directive, use the ways already outlined in your question: `v-if="conditionA && conditionB && conditionC"`. — padarom, Dec 03 '18 at 12:53
`(cond1) || ((cond2) && (cond3))` you can play with it as you want, you should learn more about if conditions in js. — Art3mix, Dec 03 '18 at 12:53
Okay that's great but it's read as a `AND` not another condition, so it must be `conditionA and conditionB and conditionC` are valid to run statment what if `conditionB` is another condition with different needs? @Padarom — Moumen Soliman, Dec 03 '18 at 12:55
https://stackoverflow.com/questions/8710442/how-to-specify-multiple-conditions-in-an-if-statement-in-javascript — Art3mix, Dec 03 '18 at 12:58
I am unsure what you mean by "condition with different needs" — padarom, Dec 03 '18 at 13:05
@Padarom I mean by different conditions, it means we dont need add it as *AND* function like `conditionA && conditionB` no I need to know how to add 2 different condition for one div. — Moumen Soliman, Dec 03 '18 at 21:07

score 2 · Accepted Answer · edited Dec 03 '18 at 14:34

2

If your condition is too long to put it inside a v-if, just create a computed property:

computed: {
   any() {
       return this.isSomething || this.isSomethingElse // || ...
   }

}

and then just use it in template: <div v-if="any">

edited Dec 03 '18 at 14:34

padarom

answered Dec 03 '18 at 12:58

score 2 · Answer 2 · answered Dec 03 '18 at 13:03

2

Yes. They run differently just within that div:

one && other // runs if both return truthy value
one || other // runs if any of them returns truthy value

Caution: another-any is invalid variable. Variable name cannot contain dash.

answered Dec 03 '18 at 13:03

2 Answers2