<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. localStorage，sessionStorage的方法重写

    本文是针对于localStorage,sessionStorage对于object,string,number,bollean类型的存取方法 我们知道,在布尔类型的值localStorage保存到本地 ...

  2. MySQL使用前查看状态

    1.检查MySQL服务器是否启动:ps -ef | grep mysqld 如果MySql已经启动,以上命令将输出mysql进程列表,如下所示:mysql下一行 如果mysql未启动,你可以使用以下命 ...

  3. Java多线程并发01——线程的创建与终止，你会几种方式

    本文开始将开始介绍 Java 多线程与并发相关的知识,多谢各位一直以来的关注与支持.关注我的公众号「Java面典」了解更多 Java 相关知识点. 线程的创建方式 在 Java 中,用户常用的主动创建 ...

  4. 为企业提供存储功能的Red Hat Stratis 2.0.1发布了

    导读 Red Hat的Stratis存储项目用于在Linux上提供企业存储功能,以与ZFS和Btrfs之类的产品竞争,同时在LVM和XFS之上构建,这是其2020年守护进程的首次更新. 通过Strat ...

  5. 爬虫过程中获取不到列表页的url

    例1: 采集某网站的时候根据网页页面显示的url链接提取的, 最后始终没有数据返回. 主要原因是页面源码中标签的 href 属性值和页面上的不一样. 页面上显示是‘http://www.xxx.org ...

  6. typescript package.json vscode 终端 运行任务 Ctrl shift B

    { "dependencies": { "typescript": "^3.6.4" } }

  7. Linux常用命令 - top命令详解（重点）

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html top ...

  8. [二分] Codefoces Anton and Making Potions

    Anton and Making Potions time limit per test 4 seconds memory limit per test 256 megabytes input sta ...

  9. 自定义上下文菜单，contextmenu事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 牛客网剑指offer【Python实现】——part1

    斐波那契数列 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0,n<=39). 循环实现,时间复杂度n def Fibonacci(self, ...