Vue 样式（背景图像）绑定不响应

Posted 2023-02-23

【中文标题】Vue 样式（背景图像）绑定不响应

【英文标题】：Vue style (background-image) binding not reactive

【发布时间】：2021-03-20 04:36:12

【问题描述】：

我想根据所选语言更改网站的某些部分而不进行任何刷新。一切正常，但我尝试了多种方法来动态绑定背景图像，无需刷新站点语言更改 (i18n)。但没有成功。

<div :style="'background-image' : mainBackground">
     test div
</div>

我创建了一个基于语言的计算返回当前使用的链接。

mainBackground()
    return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'

但在通过下拉菜单更改站点语言后，所有其他 元素 src 都会更新以使用所选语言的图像文件。 但只有这个后台路径没有更新。元素本身的样式属性也被删除。我不明白为什么这个解决方案不能正常工作。还呈现mainBackground 计算到 div 元素中。并根据语言更新返回的链接。

我已经通过使用类绑定解决了这个问题。土耳其语 1 类，所有其他语言的主要类。并在条件类绑定中使用它们。解决方案：

:class="[isTurkishSite ? 'bg-turkish' : '']"

【参考方案1】：

由于您在 url() 指令末尾放置了分号，它不起作用，使用 Vue 以对象表示法设置的 css 规则不需要分号:)

【讨论】：

我已经测试并工作过。谢谢你。但在第一次加载时，它适用于结束分号。这就是为什么我无法理解问题所在）无论如何，正如您提到的没有分号，它在第一次加载和以后的更改时都可以工作。