Vue中使用条件比较时v-bind:style指令不生效是什么原因？

:style指令失效原因 #

你的写法存在两处语法问题：

• 样式对象的属性值末尾额外加了分号：'blue;'中的;属于多余字符。Vue处理对象形式的style绑定时，会自动生成符合规范的样式字符串，手动添加的分号会导致属性值非法，浏览器无法识别该样式。
• 不必要的数组语法包裹：你当前的逻辑仅需要返回单个样式对象，不需要用数组包裹，数组语法仅适用于合并多个独立样式对象的场景。

修正后的style绑定写法 #

<!-- 简化写法，无需数组 -->
:style="i18n.global.locale == 'ar' ? { background: 'blue' } : { background: 'red' }"

<!-- 保留数组写法的修正版 -->
:style="[i18n.global.locale == 'ar' ? { background: 'blue' } : { background: 'red' }]"

两种样式都未生效的共性问题排查 #

如果class绑定也同时失效，说明你的条件判断逻辑本身没有按预期执行，最大可能是i18n.global.locale的取值方式错误：
如果你使用的是Vue3配套的vue-i18n v9及以上版本，i18n.global.locale本身是ref响应式对象，直接进行字符串比较会匹配失败，需要加.value获取实际的语言值。

完整修正后的两个绑定写法 #

<!-- 条件class绑定 -->
:class="i18n.global.locale.value == 'ar' ? 'class1' : 'class2'"

<!-- 条件style绑定 -->
:style="i18n.global.locale.value == 'ar' ? { background: 'blue' } : { background: 'red' }"

内容的提问来源于stack exchange，提问作者Artur Müller Romanov