vue页面背景颜色修改

由于vue的单页面应用导致我们的项目只有一个index.html文件，然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。废话不多说直接上代码，亲测百分之百有效：<template><div></div></template><script>export default {data() {return

测试狗一枚

6251人浏览 · 2022-05-18 16:59:28

测试狗一枚 · 2022-05-18 16:59:28 发布

由于vue的单页面应用导致我们的项目只有一个index.html文件，然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。

废话不多说直接上代码，亲测百分之百有效：

<template>
  <div>
    
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted(){},
  methods: {},
  //实例创建之前钩子函数--给body添加行内样式
  beforeCreate () {
    this.$nextTick(()=>{
      document.body.setAttribute('style', 'background:#EAECF1')
    })
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy () {
    document.body.removeAttribute('style')
  }
};
</script>
 
<style lang="scss" scoped></style>

下面说下为什么要在beforeCreate钩子内部用this.$nextTick钩子包裹，this.$nextTick的作用是dom完全加载完成，所以我们改变body背景颜色是在操作dom