css - Vue : bind a background style for cross browsers

Question

如果绑定(bind)以下background带有 v-bind:style 的样式对于跨浏览器:

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

Vue 只需要 最后一行在上面的样式中:

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

这是故意的还是一个错误？
如果是故意的，那么你不能 后退至 background: #fc00ff;如果浏览器不支持 CSS 渐变？

Answer 1

这就是使用 JavaScript 的对象语法的结果。您不能有多个具有相同名称的属性。

<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 在 2.3.0 版本中提供了解决方案。您可以通过传递数组为单个属性指定多个值。 Vue 将使用浏览器支持的数组中的最后一个值 :

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

在此处阅读更多信息: https://vuejs.org/v2/guide/class-and-style.html#Multiple-Values