美文网首页
vue单个页面设置背景

vue单个页面设置背景

作者: monkey_zero | 来源:发表于2020-03-26 16:58 被阅读0次

在vue使用的时候可能会碰到某一页面需要变换背景颜色,在全局页面设置中又不太可能,下面仅需四步就可以完成此操作

第一步,设置id

便于页面填充


第二步,在mounted里给body设置样式

代码片段

代码片段:

mounted() {

    document.querySelector("body").setAttribute("style", "background-color:#f3f3f3");

  }

第三步,数据加载时给我们id为box设置背景颜色,因为body背景填充色只填充一屏,超过一屏后会变成默认的背景色

防止超过一屏后会变成默认的背景色

代码片段:(在ajax请求完毕后使用)

 document .getElementById("box") .setAttribute("style", "background-color:#f3f3f3");

第四步,页面退出清空填充的body色

页面离开去除背景颜色

代码片段:

 beforeDestroy() {

    document.querySelector("body").removeAttribute("style");

  }

相关文章

  • vue单个页面设置背景

    在vue使用的时候可能会碰到某一页面需要变换背景颜色,在全局页面设置中又不太可能,下面仅需四步就可以完成此操作 第...

  • uniapp 横竖屏设置

    整个项目的横竖屏设置 App.vue 单个页面设置横屏 index.vue 注意:1.定时器一定要写,不然不生效。...

  • 【uni-app】设置窗口背景色

    全局窗口背景色: App.vue中设置单个页面窗口背景色:在页面的vue文件中设置

  • [Flutter 实战] 设置沉浸式状态栏(Status Bar

    在此记录项目中所遇到问题及解决方案 1. 全局设置 2. 单个页面设置 单个页面设置时未解决的问题: 设置AppB...

  • 导航栏的设置 背景 线

    一、设置导航栏底线 简单获取底线 2.单个页面设置隐藏显示 二、设置导航栏背景图1.设置导航栏背景图所需的各个尺寸...

  • 基于vue多入口项目升级webpack4实践

    项目背景简介 多页面应用,每个页面独立entry,单个页面内使用vue-router 基于vue,使用vue-lo...

  • 2018-02-01

    window.navigationStyle custom需要全局设置,不能单个页面设置 https://deve...

  • Vue js 的生命周期

    使用场景 1、Vue-cli 中为单独页面设置背景色只需要给单独页面添加如下js 2、demo 生成效果图

  • Jest运行单个测试文件

    Jest运行单个测试文件 问题背景:当我们使用vue.js框架进行测试时,使用的是直接运行jest,就会直接测试所...

  • vue页面设置水印

    参考链接:https://blog.csdn.net/weixin_44205155/article/detail...

网友评论

      本文标题:vue单个页面设置背景

      本文链接:https://www.haomeiwen.com/subject/arbcuhtx.html