Question

我有一个父组件（Vue）和一个子组件。

我有几个元素可以通过更改当前数据在组件之间切换。

问题是我不知道如何标记活动标签。

我做了很多工作，在更新，更新，挂载，创建，创建生命钩子之间切换。但没有任何效果。

此代码仅在初始加载时有效（即“ Home”），我希望它仅对活动代码进行样式设置，而不能对其他样式进行设置。但这并不令人遗憾。

在大多数情况下，它要么起作用但对所有访问的链接设置样式，或者根本不起作用，或者在初始活动选项卡（如该标签）上起作用

重要代码是父组件的一部分：

<template>
  <div id="grid">
    <nav id="navbar">

      <ul id="nav">
        <a href="#" class="Home" @click="current = 'Home'" ><li>{{navbar.Home}}</li></a>        
        <a href="#" class="Reservation" @click="current = 'Reservation'" ><li>{{navbar.Reservation}}</li></a>
        <a href="#" class="About-us" @click="current = 'About-us'" ><li>{{navbar.About}}</li></a>
        <a href="#" class="Contact" @click="current = 'Contact'" ><li>{{navbar.Contact}}</li></a>
      </ul>

      <div class="button"> <!-- Make some animation of this button becomes an extendable window of singing up. Don't forget  -->
        <a href="#">Sign Up
        </a>
      </div>
      <img src="https://i.pinimg.com/564x/8b/fa/5d/8bfa5d6a52a03e83b995fec69a4d8c2c.jpg" alt="" id="logo">
    </nav>      

    <main id="content"> 
      <keep-alive>
        <transition name="component-fade" mode="out-in">
          <component v-bind:is="current"></component>    
        </transition> 
      </keep-alive>          
    </main>      

    <footer>
      <p>Copyright © All Rights Reserved</p>
    </footer>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Aboutus from "./components/About us.vue";
import Contact from "./components/Contact.vue";
import Reservation from "./components/Reservation.vue";
import Signup from "./components/Signup.vue";

export default {
  components: {
    Home: Home,
    "About-us": Aboutus,
    Contact: Contact,
    Reservation: Reservation,
    Signup: Signup
  },
  data() {
    return {
      navbar: {
        Home: "Home",
        Reservation: "Reservation",
        About: "About us",
        Contact: "Contact"
      },
      current: "Home"
    };
  },
  mounted: function() {
    let actie = document.querySelector("." + this.current);
    actie.className = "active";
  },
  beforeUpdate: function() {
    let actie = document.querySelector("." + this.current);
    actie.className = "none";
  },
  methods: {}
};    

</script>

Answer 1

我不是Vuejs的专家，但是遇到了这个vuejs.org网站中的示例之一，请参阅CSS样式，这可能就是您想要的。

在此处查看示例： https://vuejs.org/v2/guide/components.html#Dynamic-Components

希望这会有所帮助

<h2 id="Dynamic-Components"><a href="#Dynamic-Components" class="headerlink" title="Dynamic Components"></a>Dynamic Components</h2><p>Sometimes, it’s useful to dynamically switch between components, like in a tabbed interface:</p>

<div id="dynamic-component-demo" class="demo">
  <button v-for="tab in tabs" v-bind:key="tab" class="dynamic-component-demo-tab-button" v-bind:class="{ 'dynamic-component-demo-tab-button-active': tab === currentTab }" v-on:click="currentTab = tab">
    {{ tab }}
  </button>
  <component v-bind:is="currentTabComponent" class="dynamic-component-demo-tab"></component>
</div>
<script>
Vue.component('tab-home', { template: '<div>Home component</div>' })
Vue.component('tab-posts', { template: '<div>Posts component</div>' })
Vue.component('tab-archive', { template: '<div>Archive component</div>' })
new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Home',
    tabs: ['Home', 'Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})
</script>
<style>
.dynamic-component-demo-tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.dynamic-component-demo-tab-button:hover {
  background: #e0e0e0;
}
.dynamic-component-demo-tab-button-active {
  background: #e0e0e0;
}
.dynamic-component-demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

Answer 2

一切正常。问题是您正在直接更改DOM，而Vue没有线索。因为Vue拥有自己的虚拟DOM。因此，您可以尝试一下，或者在Vue指南中阅读有关动态类绑定的更多信息：

<ul id="nav">
  <a
    href="#"
    class="['Home', current === 'Home' ? 'active' : '']"
    @click="current = 'Home'"
  >
    <li>{{navbar.Home}}</li>
  </a>        
  <a
    href="#"
    class="['Reservation', current === 'Reservation' ? 'active' : '']"
    @click="current = 'Reservation'"
  >
    <li>{{navbar.Reservation}}</li>
  </a>
  <a
    href="#"
    class="['About-us, current === 'About-us' ? 'active' : '']"
    @click="current = 'About-us'"
  >
    <li>{{navbar.About}}</li>
  </a>
  <a
    href="#"
    class="['Contact', current === 'Home' ? 'active' : '']"
    @click="current = 'Contact'"
  >
    <li>{{navbar.Contact}}</li>
  </a>
</ul>

现在只需卸下已安装的和beforeUpdate挂钩...

PS：您应该使用按钮元素进行导航。由于更好的语义/可访问性。现在已不建议将a与li一起使用/反模式。

如何设置活动标签的样式？

2 个答案: