Question

我的应用程序底部有一个导航栏。该导航包含4个图标，每个图标均会在单击时更改显示的视图。我希望选择的图标从白色变为红色。我想一种简单的方法是在选择导航中的图标时切换.active的类。我目前编写了一些代码来切换活动类。但是，这会切换所有列表项，我需要它仅更改“ this”项，而不更改其他项。另外，第一个列表项应默认设置为活动状态。有办法吗？

我的导航组件如下；

<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageOne">
        <i>Icon 1</i>
    </router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageTwo">
        <i>Icon 2</i>
    </router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageThree">
        <i>Icon 3</i>
    </router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageFour">
        <i>Icon 4</i>
    </router-link>
</li>

然后下面的脚本是;

<script>
export default {
  name: "PrimaryAppNav",
  data() {
    return {
      active: false
    };
  }
};
</script>

Answer 1

除了添加click事件处理程序以处理active类切换之外，这是另一种解决方案。

您可以在PrimaryAppNav下定义一个方法，该方法将检查当前的活动路径并返回布尔值。

通过这种方式，您不必像现在使用active属性那样将当前已切换的路线存储在组件状态下。

<li v-bind:class="{ active: isActivePath('/pageOne') }">
    <router-link to="/pageOne">
        <i>Icon 1</i>
    </router-link>
</li>
<li v-bind:class="{ active: isActivePath('/pageTwo') }">
    <router-link to="/pageTwo">
        <i>Icon 2</i>
    </router-link>
</li>
<li v-bind:class="{ active: isActivePath('/pageThree') }">
    <router-link to="/pageThree">
        <i>Icon 3</i>
    </router-link>
</li>
<li v-bind:class="{ active: isActivePath('/pageFour') }">
    <router-link to="/pageFour">
        <i>Icon 4</i>
    </router-link>
</li>

在您的PrimaryAppNav methods属性下：

isActivePath(path) {
  return this.$route.path === path;
}

Answer 2

也许是这样的：

<template>
<li @click="toggleActive('pageOne')" :class="{active: active === 'pageOne'}">
    <router-link to="/pageOne">
        <i>Icon 1</i>
    </router-link>
</li>
<li @click="toggleActive('pageTwo')" :class="{active: active === 'pageTwo'}">
    <router-link to="/pageOne">
        <i>Icon 2</i>
    </router-link>
</li>
</template>

<script>
export default {
  data() {
    return {
      active: 'pageOne'
    }
  },
  methods: {
    toggleActive(page) {
      this.active = page
    }
  }
}
</script>

我如何使用v-bind将类切换到VueJs中的此项

2 个答案: