<script>
export default {
  data () {
    return {
     bodyBgImage: 'url(' + require('../assets/bg.png') + ')'
    }
  },
  methods: {
        // 添加body图片
        setBodyBackGround () {
            document.body.style.backgroundSize = '100%'
            document.body.style.backgroundImage = this.bodyBgImage
      },
        // 清除背景图
        clearBodyBackGround () {
            document.body.style.backgroundImage = ''
      }
  },
  mounted(){
      // 进来的时候调用添加
        this.setBodyBackGround()
  },
  beforeDestroy(){
      // 离开页面的时候清除
        this.clearBodyBackGround()
  }
  
}
</script>

vue 动态添加body背景图片的更多相关文章

  1. 在Vue项目中,添加的背景图片在服务器上不显示,如何处理

    遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下 ...

  2. Qt添加窗口背景图片、Label图片显示、、Label文字显示

    一.添加窗口背景图片 重写MainWindow绘制事件 void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this) ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. Qt setStyleSheet 添加背景色/背景图片(取消背景色,读取本地文件作为背景色)

    容易搞定,mainWindow 是一个QWidget.// 设置背景色为蓝色mainWindow.setStyleSheet("background-color:blue;"); ...

  5. vue动态添加路由addRoutes之不能将动态路由存入缓存

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...

  6. vue上线后,背景图片路径错误

    build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...

  7. vue 动态添加对象属性

    昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)

  8. vue打包后css背景图片地址找不到

    背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加   publicPath: '../../'    就行 对比了下,com ...

  9. vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式

    created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...

随机推荐

  1. PTP从时钟授时模块应用及介绍

    PTP从时钟授时模块应用及介绍 随着网络技术的不断进步和发展,NTP网络时间协议已经满不了一些精密设备和仪器的精度要求,这时就需要精度更高的PTP协议,PTP协议是一种应用于分布式测量和控制系统中的精 ...

  2. IOS手动添加的View 在代码中使用(自动布局)autoLayout

    - (void)viewDidLoad { [super viewDidLoad]; UIButton *btnTest = [UIButton buttonWithType:UIButtonType ...

  3. 面试官系统精讲Java源码及大厂真题系列之Java线程安全的解决办法

    1. 背景 1.1 static修饰类变量.方法.方法块.  public + static = 该变量任何类都可以直接访问,而且无需初始化类,直接使用 类名.static 变量 1.2 多个线程同时 ...

  4. MySQL 整体架构一览

    MySQL 在整体架构上分为 Server 层和存储引擎层.其中 Server 层,包括连接器.查询缓存.分析器.优化器.执行器等,存储过程.触发器.视图和内置函数都在这层实现.数据引擎层负责数据的存 ...

  5. JVM05——JVM类加载机制知多少

    我们已经讲过 JVM 相关的很多常见知识点,感兴趣的朋友可以在我的往期文章中查看.接下来将继续为各位带来 JVM 类加载机制.关注我的公众号「Java面典」了解更多 Java 相关知识点. 类生命周期 ...

  6. touch.js——手机端的操作手势

    TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指 ...

  7. Python可以用中文命名

    Python中文命名 命名规则数字.字母.下划线 环境 python 3.7.3 x64 win10 现象 Python在命名的地方都是可以用中文命名 如: 变量 中文下划线无法被识别 打出中文下划线 ...

  8. 在Centos系统中基于PowerDNS和Poweradmin自建域名解析服务器替代DnsPod

    本文讲述了我在Centos 7系统(其他版本的Centos未尝试)中基于PowerDNS和poweradmin自建域名解析服务器替代DnsPod的过程.通过本文所述方法,可以建立权威域名解析服务器的m ...

  9. Web的服务器和Javaweb结构

    上一节介绍了Eclipse中集成Tomcat环境搭建及javaweb项目的创建,下面说说什么是web服务器及javaweb的结构. 1.web应用的演变 1.1 b/s与c/s模式 B/S:Brows ...

  10. Linux提权小结

    原文链接:http://zone.secevery.com/article/1104 Linux提权1.信息收集2.脏牛漏洞提权3.内核漏洞exp提权4.SUID提权 0x00 基础信息收集(1):内 ...