vue实现更换背景图片_vue动态设置style属性修改背景图片
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
原始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
在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")'}
}
},
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)