uniapp中vue2时style的怪别写法？

Question

<view class="card-container pr bgimg100" :style="{'--a':geturlStyle('bg.png')}">

中
:style="{'--a':geturlStyle('bg.png')}"是什么写法？为什么是'--a',如果改成调用static文件夹中的图片要怎么写？

Answer 1

css变量，换图片看看geturlStyle这里面的逻辑

Answer 2

CSS Variables 👉 CSS变量。很多时候我们在项目内会使用JS动态修改一些CSS变量以便动态修改一些样式。比如说亮色/暗色模式，这种主题色。
但是Scss、Less、Stylus提供的变量并不能被JS修改，因为项目构建完毕之后就会编译成为静态的CSS属性值。
所以如果想要动态的在项目中修改这些变量，就需要使用比如说 CSS-in-JS 这种很麻烦的方式来实现。CSS 变量出现之后，就可以很简单方便的实现这种需求了。

---

所以这个元素的 .card-container、.pr、.bgimg100 CSS类名里面多半会有一个 background-image: url(var(--a)) 的属性，检查一下元素样式你就知道了。

如果要修改成 static 文件夹中的图片，直接覆写成固定的 background-image: url('/static/img/bg.png') 或者改写CSS变量都可以。

<view class="card-container pr bgimg100" :style="{'--a': '/static/img/bg.png'}">

但是它原本使用了 getUrlStyle 这个函数，可能就是帮你拼接URL中的 /static/img/ 之类的前缀信息。