如何设置视图中构件的样式

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>

我已经导入了标题组件，并希望根据用户所处的视图更改菜单项的活动状态，如何实现？

来自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

首先，我们将view绑定到仪表板文件中的Header，以便Header可以接收当前视图。

<Header view="dashboard" />

---

然后，我们需要通过在<script>中设置props，让您的头文件知道要接收哪个属性
您可以在<template>中检查view的值以设置类或添加样式。

<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>