原始class屬性設(shè)置背景樣式

.bannerP {

position: absolute;

top: 0;

left: 2.96rem;

right: 0;

bottom: 0;

background: url(../../assets/img/backgroundp.jpg) no-repeat center; // 本地靜態(tài)圖片路徑

background-size: cover;

}

通過JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改背景圖片

首先html中設(shè)置style為 動(dòng)態(tài)綁定 即：style

在JavaScript方法中則可以通過修改綁定bacImage實(shí)現(xiàn)動(dòng)態(tài)更換背景屬性。

mounted () {

let imageName = 'mobile' //手機(jī)終端

// 通過瀏覽器判斷終端為手機(jī)(true) 或者 pc(false) 動(dòng)態(tài)切換背景圖片

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")'}

}

},

總結(jié)

以上是生活随笔為你收集整理的vue实现更换背景图片_vue动态设置style属性修改背景图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。