如果您为跨浏览器使用 v-bind:style 绑定(bind)以下 background 样式:
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; 吗？
最佳答案
这是使用 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://v2.vuejs.org/v2/guide/class-and-style.html#Multiple-Values
关于css - Vue : bind a background style for cross browsers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62502958/