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?

Answer 1

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.

Answer 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">