vue单个页面设置背景

在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");

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容