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.
use v-for and v-if together could cause unexpected problem , it is not suggested according to the official document. You need to convert your object to an Array to be able to filter it.
The v-if directive is a Vue. js directive used to toggle the display CSS property of a element with a condition. If the condition is true it will make it visible else it will make it invisible.
Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
The key difference is that v-if conditionally renders elements and v-show conditionally displayselements. This means that v-if will actually destroy and recreate elements when the conditional is toggled. Meanwhile, v-show will always keep the element in the DOM and will only toggle its display by changing its CSS.
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.
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'
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With