Question

我正在寻找一种基于链接的确切或活动属性来自定义CSS的方法。也就是说，当某人单击菜单中的项目时，下划线会根据链接是否为活动路由器链接而变化。我能够做到这一点，但是在链接处于活动状态时始终使用相同的颜色。这意味着只要有人单击链接，底部边框就会变为黄色。我想要的是，当有人单击主页时，颜色为红色，而当有人单击图表时，颜色为蓝色，以此类推（以防我有更多链接）。

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
   data() {
    return {
      links: [
        { icon: 'dashboard', text: 'Home', route: '/', component: home , color:"red"},
        { icon: 'mdi-chart-pie', text: 'Radar diagrammen', component: diagram, route: '/diagram' , color:"blue"}
      ]
    }
  }
})

HTML

<div id="app">
    <div>
       <v-app-bar flat app dark class='elevation-0'> 

      <v-toolbar-title class="text grey--text">
        <span class="font-weight-light">Stations</span>
      </v-toolbar-title>
<v-spacer></v-spacer>
<div class="flex-grow-1"></div>        
         <v-btn v-for="link in links"
         :key="link.text"
         router :to="link.route"
         text
         exact
         small
         tile
         active-class="active text-center">{{link.text}}</v-btn>
      </div>
</div>

CSS

.active {
      border-bottom: yellow solid 2px;
    }

Answer 1

这种方法是 -将选定的班级添加到父级 -创建

之类的CSS规则

.red .nav--link__red {}
.blue .nav--link__blue {}

单击后，我们以找到所选项目的方式设置父类。

https://codepen.io/Ranushka/pen/ZEzjdrO

我真的是vue.js的新手，所以可以有更好的解决方案。

基于激活的vue-route-link的动态颜色

1 个答案: