Menu
I have an easy question for which I hope you could help:
<div>
<figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }">
</div>
I want the style attribute 'background' to return color if the URL from API is undefined
Example:
If item.featured_photo is not null:
<figure style="background: url('localhost:6969/image.img') center no-repeat">
If item.featured_photo is null:
<figure style="background: #FFF">
969
A common need for data binding is manipulating an element's class list and inline styles. Since class and style are both attributes, we can use v-bind to assign them a string value dynamically, much like with other attributes.
The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is binded to our data defined in Vuejs instance then dynamically changes can be observed as data changes.
v-else-if directive is a Vue. js directive used to toggle the display CSS property of an element depending on a condition when the if condition is not satisfied. First, we will create a div element with id as app and let's apply the v-else-if directive to an element with data.
Binding Styles Dynamically To this end, Vue provides us with the v-bind:style directive. On each click event, the v-bind:style directive increments and decrements the value of your fontSize variable. This attaches the value of fontSize to the CSS font-size property.
Use condition in V-bind:style VueJS:
v-bind:style= "[condition ? {styleA} : {styleB}]"
Here is the minimal example,
<figure :style="[item.main_featured ? {'background': 'url(' + item.main_featured + ') center no-repeat'} : {'background': '#FFF'}]">
If you need Parent-Child-Conditions, then this is the magic:
v-bind:style= "[condition_1 ? condition_2 ? {styleA} : {styleB} : {styleC}]"
In short of:
if (condition_1) {
if (condition_2) {
return styleA
} else {
return styleB
}
} else {
return styleC
}
Hope it helps!
108
The previous references were very good, but for me what really worked was this:
<input type="text"
v-bind:style=" boolVariable ? 'border: 1px solid orange;' : 'border: none;' ">
In the documentation: https://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
Regards!
28
Feed Git's answer is perfect, here's another example with multiple attributes. Just separate with commas:
:style="[printing ? {'margin' : '0px 0px 20px 0px', 'min-height': '830px', 'box- shadow': 'none', 'border': 'none'} : {'margin': '0px 0px 20px 0px', 'min-height': '830px'}]
The form follows (for someone like me who's new at this):
:style="[boolVariable ? { true } : { false }]
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