<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. JavaScript的函数（一）

    ,1,在javascript中,函数即对象.函数里面的参数可以是个函数,例如: data.sort(function(a,b){return a-b;}) 函数的返回值,return语句导致函数停止执 ...

  2. 聊聊CAS - 面试官最喜欢问的并发编程专题

    什么是CAS 学习Java并发编程,CAS(Compare And Set)机制都是一个不得不掌握的知识点.除了通过synchronized进行并发控制外,还可以通过CAS的方式控制,大家熟悉的Ree ...

  3. HDFS文件系统基操--Java实现

    Java实现对HDFS文件系统的基本操作 1.准备好jar包 2.创建一个类 1. 测试连接 @Test //测试是否连接成功 public void test() { //添加配置 ==> c ...

  4. 深入理解React key

    一 react 组件元素的 diff 算法 二 key 的理解 概述 react 中的key 属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key ...

  5. OpenCV3入门（十三）图像运动模糊

    1.原理 运动模糊产生: 由于相机传感器或物体相对运动, 按快门瞬间造成图像产生运动模糊. 在用摄像机获取景物图像时,如果在相机曝光期间景物和摄像机之间存在相对运动,例如用照相机拍摄快速运动的物体,或 ...

  6. 04-influxdb基本操作

    influxdb基本操作 1. 数据库基本操作 # 创建数据库 > create database db01; # 查看数据库 > show databases; name: databa ...

  7. 【JDK】JDK源码分析-HashMap(2)

    前文「JDK源码分析-HashMap(1)」分析了 HashMap 的内部结构和主要方法的实现原理.但是,面试中通常还会问到很多其他的问题,本文简要分析下常见的一些问题. 这里再贴一下 HashMap ...

  8. C++ 理解类 和 类中的public、protected、private

    我们要明确,不只是C++有类,很多语言也会用到类,因为现在很多都是面向对象编程... 在c++中,关于类的理解,个人理解是这样的,具有共同属性的一个集合被称为类, 比如说人这个集合,具有性别,年龄,出 ...

  9. Spring总结————spring核心Core

    一.spring的概念 spring是一个开源的,轻量级控制反转和面向切面的容器框架,解决企业应用开发的复杂性,降低耦合,更易于测试. spring春天.如果写一个小的项目,我们可以在项目中想创建一个 ...

  10. Data-independent acquisition mass spectrometry in metaproteomics of gut microbiota - implementation and computational analysis DIA技术在肠道宏蛋白质组研究中的方法实现和数据分析 （解读人：闫克强）

    文献名:Data-independent acquisition mass spectrometry in metaproteomics of gut microbiota - implementat ...