Vue: bind a background style for cross browsers

user_413225 0
Viewed 273

If you bind the following background styles with v-bind:style for cross browsers:

background: #fc00ff;
background: -webkit-radial-gradient(circle at top left, #00dbde, #fc00ff);
background: radial-gradient(circle at top left, #00dbde, #fc00ff);

Vue only takes the last line in the style above:

background: radial-gradient(circle at top left, #00dbde, #fc00ff);

Is this intentional or is it a bug?

If it is intentional, then you cannot fall back to background: #fc00ff; if the browser does not support the CSS gradient?

vuejs2 vue.js css
1 Answers

That's the result of using JavaScript's object syntax. You cannot have multiple properties with the same name.

<div v-bind:style="{
  background: '#fc00ff',
  background: '-webkit-radial-gradient(circle at top left, #00dbde, #fc00ff)',
  background: 'radial-gradient(circle at top left, #00dbde, #fc00ff)',
}">Object syntax</div>

Vue provides a solution in version 2.3.0. You can specify multiple values for a single property by passing an array. Vue will use the last value in the array that the browser supports:

<div v-bind:style="{
  background: ['#fc00ff', '-webkit-radial-gradient(circle at top left, #00dbde, #fc00ff)', 'radial-gradient(circle at top left, #00dbde, #fc00ff)']
}">Supported in 2.3.0+</div>

Read more about it here: https://v2.vuejs.org/v2/guide/class-and-style.html#Multiple-Values

user_134707540
Related