相关疑难解决方法(0)

我有一个vue的组件,我希望在点击时在主体上切换一个类.

我怎样才能做到这一点？我是否只需要使用JS来定位主体并添加一个类？

还是有更多的vue方式？

对于上下文,我需要向正文添加一个无滚动类,以防止滚动覆盖菜单.

Vue 2和Vue-Router 2。

我正在尝试根据访问的路线来更改应用程序导航栏的颜色。这是我所拥有的：

main.js：

import App from "../components/App.vue"    

const app = new Vue({
  router: Router,
  template: '<app></app>',
  components: { App }
}).$mount('#app')

App.vue：

<template>
    <div>
        <div class="navbar" v-on:class="{ colorNav: 'color-nav' }"></div>
        <router-view></router-view>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        colorNav: false
      }
    }
  }
</script>

使用此设置，由于colorNavproperty为false，因此color-nav不会将类添加到导航栏。按预期工作。

现在，用户转到/somepage，它映射到SomePage.vue，后者在内部渲染router-view。我希望SomePage.vue更改colorNavApp.vue 的属性，以便将该color-nav类添加到导航栏中。

我怎么做？

我正在尝试将登陆页面的背景颜色设置为橙色，但问题是我目前拥有的所有页面都是橙色的。

我尝试添加scoped到登录页面，以便它只设置该页面的样式，但是当我这样做时，整个页面不再是橙色。

最终目标是只影响着陆页。

我已经尝试过 HTML 和 Body 而不是 ' * '，这些在这种情况下也不起作用。

landingpage.vue：

<template>
    <div class="container">
        <div class=landing>
            <h1>Hello.</h1>
            <router-link to="/work">
                <button id="work" type="button">See my work</button>
            </router-link>
            <router-link to="/home">
                <button id="home" type="button">Go home</button>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Landing',
};
</script>

<style scoped>
* {
    background: orange;
}

h1 {
    margin-top: 100px;
    text-align: center;
    font-size: 80px;
    color: green;
}
#work {
    color: green;
    border: none;
    font-size: 25px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: …