javascript - 如何在 View 中设置组件样式？

Question

<template>
  <div class="about">
    <Header />
    <h1>This is the dashboard page</h1>
  </div>
</template>

<script>
import Header from "../components/layout/Header.vue";

export default {
  name: "dashboard",
  components: { Header }
};
</script>

我已经导入了头部组件，想根据用户所在的 View 更改菜单项的事件状态，我该如何实现？

来自 header.vue 的片段

 <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item">Dashboard</a>
            <a class="navbar-item">Building Overview</a>
            <a class="navbar-item">Map View</a>
            <a class="navbar-item">Log Out</a>
            <a class="navbar-item">Import</a>
            <a class="navbar-item">Export</a>
          </div>
        </div>

Answer 1

首先，我们绑定(bind) view到 dashboard-file 中的 Header，因此 header 可以接收当前 View 。

<Header view="dashboard" />

---

然后我们需要通过设置 props 让您的header-file 知道接收哪个属性里面<script> .
您可以查看 view 的值里面<template>设置类或添加样式。

<template>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-end">
      <a :class="view == 'dashboard' ? 'navbar-item--active' : 'navbar-item'">Dashboard</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ['view']
};
</script>