vue页面背景颜色修改

最新推荐文章于 2025-03-12 11:15:48 发布

测试开发abbey

最新推荐文章于 2025-03-12 11:15:48 发布

阅读量6.5k

点赞数 1

分类专栏：前端—Vue+TS+ElementUI+Vite 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sanmi8276/article/details/124846284

版权

前端—Vue+TS+ElementUI+Vite 专栏收录该内容

24 篇文章

订阅专栏

该博客分享了在Vue的单页面应用中如何在不同场景下改变页面背景色的方法。通过在beforeCreate钩子中使用this.$nextTick确保DOM加载完成后，动态添加body的行内样式，并在beforeDestroy钩子中移除样式，实现了页面背景色的切换。这种方式直观且有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于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