css样式中使用var

wx_jiaweri

已于 2022-09-30 13:51:34 修改

阅读量870

点赞数

分类专栏：小程序文章标签： css vue.js 前端

于 2022-06-23 16:16:44 首次发布

本文链接：https://blog.csdn.net/weixin_44671184/article/details/125425437

版权

小程序专栏收录该内容

132 篇文章 1 订阅

订阅专栏

本文介绍了在Vue项目中如何使用var()函数动态更改CSS中DOM的伪元素属性。通过在data中定义变量，HTML中动态绑定样式，并在CSS中使用var()设置变量，可以实现伪元素属性的动态更新。示例中展示了如何动态改变:before伪元素的高度。

摘要由CSDN通过智能技术生成

在写vue项目中，有时候需要动态更改css中某个dom的伪元素属性，这时候就可以通过使用 var() 设置变量来动态更改

var()函数的使用
1.首先data里面定义一下要更改的变量属性
export default {
  data () {
    return {
      beforeHeight: '18px'
    }
  },
}
2.在html代码中动态绑定属性
:style="{’- -beforeHeight’: beforeHeight}" 注意加- -

<van-tree-select
    class="tree"
    :style="{'--beforeHeight': beforeHeight}"
    :items="items"
    :active-id.sync="items.activeId"
    :main-active-index.sync="items.activeId"
    @click-nav="onNavClick">
</van-tree-select>
3. 在css中使用
    .van-tree-select__nav::before{
      content: "";
      display:block;
      width: 100%;
      height: var(--beforeHeight);
      border-radius: 0 0 9px 0;
      background-color: #fff;
    }
4.最后如果想动态更改伪元素的属性，可以通过vue中的方法来改变this.beforeHeight的值就可以了

定义
data: {
mall_styles: --before:url(https://xiaoheitan.oss-cn-shenzhen.aliyuncs.com/attached/shop0/image/20220224/mevm859gibkysqyunl68.jpg),}
引用

使用
.mall_bg::before {
content: “”;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(–before) center / cover no-repeat;
filter: blur(50px);
z-index: -1;
}