v-bind:style 指令不适用于条件比较

Posted 2023-03-16

【中文标题】v-bind:style 指令不适用于条件比较

【英文标题】：v-bind:style directive not working with conditional comparison

【发布时间】：2022-01-12 15:42:08

【问题描述】：

我可以根据这样的条件将一个类绑定到vue 中的一个元素：

:class="i18n.global.locale == 'ar' ? 'class1': 'class2'"

但是当我尝试用相同的条件绑定style 时：

:style="[i18n.global.locale == 'ar' ?  'background': 'blue;' :  'background': 'red'  ]"

styles 都不应用于元素。为什么:style 指令不起作用？

这两个指令都应用于​​包含所有其他元素的container div。

【问题讨论】：

因为你写了无效的样式，背景颜色你应该写backgroundColor: 'blue'

Sass/postCsc不无效

【参考方案1】：

我对您的问题进行了一些研究，因此您可以这样做：

在您的浏览器开发工具中检查元素的样式，可能会出现从 css 文件覆盖您的绑定样式的情况，例如，如果您有指向 css 文件的链接 这里 'background': 'blue;' 尝试删除';'，至于我删除时它开始工作。

【讨论】：

该死，2. 让它工作。谢谢:-)