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

我的应用程序有一个底部导航栏。此导航包含4个图标，单击每个图标可更改显示的视图。我想要选择的图标从白色变为红色。我想一个简单的方法是在选择导航中的图标时切换

.active

类。我目前已经编写了一些代码，用于切换活动类。但是，这会切换所有列表项，我需要它只更改“此”项，而不是其他项。另外，第一个列表项应该由defauly设置为活动。有办法做到这一点吗

我的导航组件如下

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

图标1


图标2


图标3


图标4

下面的脚本是

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

导出默认值{
名称：“PrimaryAppNav”，
数据（）{
返回{
活动：错误
};
}
};

可能是这样的：

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

图标1


图标2

导出默认值{
数据（）{
返回{
活动：“第一页”
}
},
方法：{
toggleActive（第页）{
this.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>

这真是太棒了@anaLiza。非常感谢你。我现在理解了逻辑，应用的代码工作得很好。非常感谢你的帮助。
isActivePath(path) {
  return this.$route.path === path;
}