Question

对于跨浏览器，如果您将以下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);

这是故意的还是错误？

如果是故意的，那么如果浏览器不支持CSS渐变，您是否不能后退到background: #fc00ff;？

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

Vue：为跨浏览器绑定背景样式

1 个答案: