vue动态设置style属性修改背景图片

原始class属性设置背景样式

  .bannerP {
    position: absolute;
    top: 0;
    left: 2.96rem;
    right: 0;
    bottom: 0;
    background: url(../../assets/img/backgroundp.jpg) no-repeat center;   //  本地静态图片路径
    background-size: cover;
  }

通过JavaScript实现动态修改背景图片

首先html中设置style为 动态绑定 即 ：style

 <div :class=" $store.state.isMobile?'bannerH':'bannerP'" ref="backGroundRef" :style="bacImage">
    </div>

在JavaScript方法中则可以通过修改绑定bacImage实现动态更换背景属性。 

 mounted () {
            let imageName = 'mobile' //手机终端
            //  通过浏览器判断终端为手机(true) 或者 pc(false) 动态切换背景图片
            if (!this.$store.state.isMobile) {
                imageName = 'web'  // pc 浏览器
                this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/loginBackground.gif")'}
            }
            else {
                this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/web_background.jpg")'}
            }

        },