当前位置: 首页 > 知识库问答 >
问题:

uniapp中vue2时style的怪别写法?

司徒啸
2023-07-15
<view class="card-container pr bgimg100" :style="{'--a':geturlStyle('bg.png')}">


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

共有2个答案

颜河
2023-07-15

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/ 之类的前缀信息。

戚逸清
2023-07-15

css变量,换图片看看geturlStyle这里面的逻辑
image.png

 类似资料:
  • 本文向大家介绍style标签写在body前和body后的区别是什么?相关面试题,主要包含被问及style标签写在body前和body后的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 渲染机制的区别,在body前是已经把样式浏览一遍,到了对应标签直接,渲染样式。显示块。 在body后,是浏览器已经把标签浏览了,但基于没有样式,显示的不完全,再把body后的样式表,扫描后,在成为真正的样式。

  • 我的问题是: 既然我们已经有了typedef样式,那么使using样式成为C++标准的动机是什么呢?

  • 问题内容: 到处都写着静态方法不能被覆盖,但是当我尝试将访问说明符从public改为protected时,它给出了一个错误。例如 它说 无法降低继承方法的可见性 所以说这是遵循最重要的规则,为什么我们说foo在B类中没有被忽略?为什么我们说它是隐藏/阴影而不是覆盖? 问题答案: 它 遵循 与覆盖 相同 的 一些规则 ,但这并不意味着它 被 覆盖。在这种情况下,这就是JLS的8.4.8.3节 “覆盖

  • 用uniapp 写h5、这个样式用什么可以去实现啊? 有demo吗? 或者插件库已经实现了的

  • 我使用的是mongodb(v2.6.7)和mongo(2.6.7)shell客户端。 我正在尝试使用insert和update命令返回的WriteResult对象。 根据mongodocs,如果出现错误,它将返回一个writeResult对象,其中包含writeError子文档。但我无法在shell或mongo的javascript文件中访问此子文档。 下面是我的问题的说明。 我插入一个对象,并获

  • 背景: 当isTranslate的值改变之后,调用页面的queryData方法,但是这段代码我要在多个vue页面中用,vue2写一个mixin.js直接mixin注入到当前页面就可以,vue3有啥办法