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

【问题标题】：Vue: bind a background style for cross browsersVue：为跨浏览器绑定背景样式
【发布时间】：2020-06-21 18:41:47
【问题描述】：

如果您为跨浏览器绑定以下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;？

【问题讨论】：

标签： css vue.js vuejs2

【解决方案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

【讨论】：