Vue.js：如何为点击的元素单独设置激活样式功能？

点击导航栏的<li>元素时，所有<li>都会被添加上底部边框，需求是仅被点击的<li>显示底部边框，实现独立的激活状态。

原代码 #

<!-- navbar -->
<nav class="nav navbar-expand-lg main-nav d-flex">
    <h1 class="text-center fs-2">دفتر ترجمه رسمی پروند</h1>
    <ul class="my-auto mx-auto main-ul">
        <li>
            <router-link class="link" to="/">
                خانه
            </router-link>
        </li>
        <li @click="activeMe" :class="[isActive ? 'list-border' : '']">
            <router-link class="link" to="/tranlsation-services">
                خدمات ترجمه
            </router-link>
        </li>
        <li @click="activeMe" :class="[isActive ? 'list-border' : '']">
            <router-link class="link" to="/translation-tariffs">
                تعرفه ترجمه
            </router-link>
        </li>
    </ul>
</nav>

<script>
export default {
    data() {
        return {
            mobileNav: false,
            isActive: false,
        }
    },
    methods: {
         activeMe() {
            if (!this.isActive) {
                this.isActive = !this.isActive
            }
        },
        handleView() {
            this.mobileNav = true;
        },
        handleView2() {
            this.mobileNav = false;
        },
    },
    created() {
        window.addEventListener("resize", this.handleView);
        window.addEventListener("resize", this.handleView2);
    },
}
</script>

<style>
.list-border {
    border-bottom: 4px solid white !important;
}
</style>

问题原因 #

所有<li>都绑定了同一个全局变量isActive，点击任意一个<li>都会切换这个变量的状态，导致所有绑定该变量的<li>同时触发样式变化。

解决方案 #

方法1：手动管理激活状态 #

通过记录当前激活的路由路径，实现单个<li>的独立激活：

<!-- navbar -->
<nav class="nav navbar-expand-lg main-nav d-flex">
    <h1 class="text-center fs-2">دفتر ترجمه رسمی پروند</h1>
    <ul class="my-auto mx-auto main-ul">
        <li :class="[activePath === '/' ? 'list-border' : '']">
            <router-link class="link" to="/" @click="activeMe('/')">
                خانه
            </router-link>
        </li>
        <li :class="[activePath === '/tranlsation-services' ? 'list-border' : '']">
            <router-link class="link" to="/tranlsation-services" @click="activeMe('/tranlsation-services')">
                خدمات ترجمه
            </router-link>
        </li>
        <li :class="[activePath === '/translation-tariffs' ? 'list-border' : '']">
            <router-link class="link" to="/translation-tariffs" @click="activeMe('/translation-tariffs')">
                تعرفه ترجمه
            </router-link>
        </li>
    </ul>
</nav>

<script>
export default {
    data() {
        return {
            mobileNav: false,
            activePath: '', // 记录当前激活的路由路径
        }
    },
    methods: {
         activeMe(path) {
            this.activePath = path;
        },
        handleView() {
            this.mobileNav = true;
        },
        handleView2() {
            this.mobileNav = false;
        },
    },
    created() {
        window.addEventListener("resize", this.handleView);
        window.addEventListener("resize", this.handleView2);
        // 初始化激活状态为当前路由
        this.activePath = this.$route.path;
    },
    watch: {
        // 监听路由变化，自动更新激活状态
        '$route.path'(newPath) {
            this.activePath = newPath;
        }
    }
}
</script>

<style>
.list-border {
    border-bottom: 4px solid white !important;
}
</style>

方法2：利用router-link内置激活类（更优雅） #

router-link自带路由匹配激活机制，无需手动写点击事件，直接通过active-class绑定样式：

<!-- navbar -->
<nav class="nav navbar-expand-lg main-nav d-flex">
    <h1 class="text-center fs-2">دفتر ترجمه رسمی پروند</h1>
    <ul class="my-auto mx-auto main-ul">
        <li>
            <router-link class="link" to="/" active-class="list-border">
                خانه
            </router-link>
        </li>
        <li>
            <router-link class="link" to="/tranlsation-services" active-class="list-border">
                خدمات ترجمه
            </router-link>
        </li>
        <li>
            <router-link class="link" to="/translation-tariffs" active-class="list-border">
                تعرفه ترجمه
            </router-link>
        </li>
    </ul>
</nav>

<script>
export default {
    data() {
        return {
            mobileNav: false,
        }
    },
    methods: {
        handleView() {
            this.mobileNav = true;
        },
        handleView2() {
            this.mobileNav = false;
        },
    },
    created() {
        window.addEventListener("resize", this.handleView);
        window.addEventListener("resize", this.handleView2);
    },
}
</script>

<style>
.list-border {
    border-bottom: 4px solid white !important;
}
</style>

说明：active-class会在当前路由与router-link的to属性匹配时，自动给元素添加指定类，完全贴合Vue Router的设计逻辑，无需额外维护状态。

内容的提问来源于stack exchange，提问作者Peyman