我们在开发时候,有时候也想给不同页面设置不同的背景颜色。
  • 如果设置scoped呢,其它页面也无法设置
  • 如果不设置,a页面是红色,在b页面设置完蓝色,由于Vue是单页面应用,我们会发现a页面也会变成蓝色。

那么这个时候我们就可以使用生命周期法了。
代码如下:

onMounted(()=>{
  document.querySelector(".wrapper").setAttribute("style","background: linear-gradient(90deg, #18C1ED 0%, #3495EA 50%, #2161EF 100%);")
})
onBeforeUnmount(()=>{
  document.querySelector(".wrapper").removeAttribute('style')
})

这段意思是在页面创建后设置背景颜色,同时为了防止设置之后会污染其它页面的css,这时候只需要在页面销毁前取消设置背景颜色。

版权属于:染念
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
更新于: 2023年03月16日 22:09
9
发表评论


179 文章数
668 评论量
4 分类数
183 页面数
已在风雨中度过 7年46天5小时20分
目录
来自 《vue3页面统一背景色后,如何更改某个页面的背景色并且避免css污染?》
© 2024 染念Blog
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部
© 2024 染念Blog
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部