Javascript Vuejs-在样式模板中为背景图像使用变量

我有一个关于在样式模板的背景图像中使用变量的问题。这可能吗

我想实现这样的目标：

 <script>
  export default {
    name: 'setCss',
    computed: {
    cssVars() {
      var ua = navigator.userAgent.toLowerCase();
      var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
      var path = '';
      if(isAndroid) {
        path = 'img/samsung/';
      } else{
        path = 'img/iphone/';
      }
      return {
        '--bg-path': path,
      }
    }
    }
  };
</script>

导出默认值{
名称：“setCss”，
计算：{
cssVars（）{
var ua=navigator.userAgent.toLowerCase（）；
var isAndroid=ua.indexOf（“安卓”）>-1；/&&ua.indexOf（“移动”）；
var路径=“”；
if（isAndroid）{
路径='img/samsung/'；
}否则{
路径='img/iphone/'；
}
返回{
“--bg路径”：路径，
}
}
}
};

然后使用这个CSS：

    <style scoped>
div {
    background-image: var(--bg-path) + '/1366x400@2x.jpg';
    background-size: 1366px 400px;
}

@media not all,
not all,
only screen and (max-width: 480px) {
    div {
        background-image: var(--bg-path) + '/480x288.jpg';
        background-size: 480px 288px;
    }
}

</style>

div{
背景图像：var（--bg路径）+'/1366x400@2x.jpg';
背景尺寸：1366px 400px；
}
@媒体,不是全部,，
不全是,，
仅屏幕和（最大宽度：480px）{
div{
背景图像：var（--bg路径）+'/480x288.jpg'；
背景尺寸：480px 288px；
}
}

这不起作用，但我想知道是否有办法做到这一点？

您需要使用

在您的情况下，绑定样式如下所示。首先，需要将样式与计算的背景图像绑定（其余样式不需要绑定，它们可以保留在

style

标记中）

。。。
计算：{
computedBgImage（）{
让路；
if（isAndroid）{
路径='img/samsung/'；
}否则{
路径='img/iphone/'；
}
返回路径+'/480x288.jpg'
}
}
...

---

如果您需要在多个地方使用相同的图像，请考虑为每个图像定义一个类，并绑定类，而不是样式，如上面链接中所解释的。

为此，您只需将计算的属性<代码> CSVARS传递给组件，作为动态<代码>样式属性如下：

<button :style="cssVars">My button</button>

按钮{
背景色：var（--bg色）；
填充：10px 20px；
}

我的纽扣

将

背景图像：

部分移出css并在vue中执行，或者实际设置css变量--bg path

document.documentElement.style.setProperty（'--bg path'，path）

。您在何处以及如何使用CSSVAR