[Vuejs]-Is it possible to style a menu differently on different "pages" in Vue.js?

by

0👍

A good way to do this is to create a computed property called isTop that will return true if the user is on the "Top page."

If menu here is a subcomponent, you can pass it a prop:

<menu :isTop='isTop'>

And then use Vue’s conditional class syntax within the child component to dynamically select the correct CSS class based on the value of isTop:

// Template of child component:
<div :class='[{"menuTop": isTop}, {"menuGeneral": !isTop}]'>
...
</div>

If you actually mean to use the <menu> HTML tag, you can use similar syntax directly on it, without a child component:

<menu :class='[{"menuTop": isTop}, {"menuGeneral": !isTop}]'></menu>

In either case, your computed property will look something like this:

computed: {
  isTop: function() {
    // how you determine whether you're on the "Top page" is outside the scope of this question.
    // for example, if you're using Vue Router, you could compare the current route with a route for the Top page.
    // return true if you are on the "Top page" and return false if not.
  }
}

And your style block will be something like this:

<style>
  .menuTop {
    color: blue;
  }
  .menuGeneral{
    color: green;
  }
</style>

Leave a comment