Vue实现独立修改单个页面的背景色,进入不同的页面设置不同的背景颜色【两种方式】
Vue 实现 方式 修改 页面 不同 两种 颜色
2023-09-27 14:27:10 时间
博主介绍
📢点击下列内容可跳转对应的界面,查看更多精彩内容!
文章目录
简介:这是一篇有关【Vue实现独立修改单个页面的背景色,进入不同的页面设置不同的背景颜色】的文章,博主用
最精简的语言
去表达给前端读者们。
1、路由实现
beforeRouteEnter
beforeRouteLeave
export default {
data() {
return {}
},
// 组件内路由进入组件时
beforeRouteEnter(to, from, next) {
window.document.body.style.backgroundColor='#f2f3f8'
next()
},
// 组件内路由离开组件时
beforeRouteLeave(to, from, next) {
window.document.body.style.backgroundColor=''
next()
}
}
2、生命周期实现
beforeCreate
beforeDestroy
export default {
data() {
return {}
},
//创建前设置
beforeCreate () {
// 例如设置为红色
document.querySelector('body').setAttribute('style', 'background-color: red;')
},
// 销毁前清除(非必须,不清除的话完全可以,这块只不过告诉您可以这么玩)
beforeDestroy () {
document.querySelector('body').removeAttribute('style')
},
}
精彩推荐
⭐流程图高级用法【Markdown进阶篇】
⭐Markdown使用手册【基础篇】
⭐npm package.json文件属性说明【前端必知】
⭐npm常用命令操作手册【程序员必备】
⭐Git操作手册【前端必备手册】
相关文章
- 【Vue】vue的双向绑定原理及实现
- vue-项目增加登录模块 从0到1
- 解决webstorm不能识别vue的@路径引用
- Vue中的 消息订阅与发布(pubsub)及TodoList 示例
- Vue 中的 Todo-list 案例
- 一文带你学会国产加密算法SM4的vue实现方案
- vue实现表计监测界面
- 精品spring boot+MySQL微人事系统设计与实现vue
- 精品微信小程序ssm电子作业小程序+后台管理系统|前后分离VUE
- 基于SpringBoot+VUE实现博客系统
- vue开发规范
- Spring Boot + Vue + Shiro 实现前后端分离、权限控制
- 精品微信小程序二手汽车拍卖系统+后台管理系统|前后分离VUE
- Vue.js:返回本地时间日期利用双大括号和v-text单项绑定文本两种方法实现
- 宝塔面板部署Vue项目、服务端Node___配置域名
- vue配置生产环境.env.production、测试环境.env.development
- 15.(前端)vue-cli脚手架的安装
- Vue + ElementUI的电商管理系统实例06 删除用户
- Vue 内容太长显示不全,实现鼠标悬浮显示全部内容
- vue动画实现方式
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
- Vue技术12.1基本列表
- Vue笔记——Axios异步通信(狂神)
- Vue+SpringBoot+ElementUi+mybatis-plus 实现用户信息的修改及模拟充值
- 每个人都能实现的vue自定义指令
- vue通过路由实现页面刷新
- vue_music:排行榜rank中top-list.vue中样式的实现:class
- vue实现双向绑定mvvm
- vue实现与安卓、IOS交互
- 动态组件 :is与is区别 vue.js
- vue实现修改title提示框-默认样式【两种方式】
- vue实现随机验证码(数字类型、字母类型)业务【适用于登录页、网页安全码】
- vue实现pdf在线预览业务
- vue快速实现锚点功能【简单版与高级版】
- 让Vue也可以使用Redux
- Vue 进阶系列之响应式原理及实现
- 使用Vue框架实现NGA客户端
- Vue.js——基于$.ajax实现数据的跨域增删查改【4】