vue3页面统一背景色后,怎样修改某个页面的背景色并且避免css的污染!

我们在开发时候,有时候也想给不同页面设置不同的背景颜色。

  • 如果设置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,这时候只需要在页面销毁前取消设置背景颜色。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
php开发

PHP利用子比主题自带钩子实现开通会员自动官方认证

2023-9-5 21:56:45

csshtmljava

利用HTML+CSS+JS完成弹窗功能并具备关闭按钮

2023-4-22 16:23:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索