Vue-如何更改不同组件中相同元素的样式 [英] Vue- How to change style of a same element in different components
本文介绍了Vue-如何更改不同组件中相同元素的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将特定 div 的样式从一个组件更改为另一个组件.每个组件都附加到 App 组件中的模板，并替换 Hello.vue 组件中需要有 172px 的内边距，在其余组件上有 0px 内边距.这可能吗，我该如何实现?
App.vue
<div id="应用程序"><div><img src="./assets/logo.png" align="center"><路由器视图></路由器视图>
</模板><脚本>导出默认{名称:'应用'}<风格>#应用程序 {font-family: 'Avenir', Helvetica, Arial, sans-serif;背景色:hsla(275, 97%, 50%, 0.57);-webkit-font-smoothing:抗锯齿；-moz-osx-font-smoothing:灰度；文本对齐:居中；颜色:#2c3e50；边距顶部:0px；高度:继承；}身体{高度:继承；}html{高度:100%；}</风格>
Hello.vue
<div class="你好"><h1>{{ msg }}</h1><ul><li><h2><router-link to="/app/login">登录</router-link></h2></li><li><h2><router-link to="/app/about">关于我们</router-link></h2></li></模板><脚本>导出默认{name: '你好',数据 () {返回 {msg: '欢迎使用 Vue'}}}<!-- 添加scoped"属性以将 CSS 限制为仅适用于该组件 --><样式范围>#应用程序{填充顶部:172px；/*这不起作用*/}h1, h2 {字体粗细:正常；}ul{列表样式类型:无；填充:0；}李{显示:内联块；边距:0 10px；}一种 {颜色:#000000；}</风格>
解决方案
有一个快速的方法来做到这一点(不确定这是否是最佳实践)，通过检查路由路径；假设 Hello.vue 是通过路径 /hello 呈现的:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">...