0

我是 Vue 的新手,我想制作一个侧边栏:

<template>
        <div class="sidebar">
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#tickets">Tickets</a>
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#account-details">Account Details</a>
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#addresses">Addresses</a>
            <a @click="clickSidebar" :class="isActive ? 'active' : ''" href="#downloads">Downloads</a>
        </div>

</template>
<script>
    export default {
        data(){
            return {
                isActive: true
            }
        },
        methods: {
            clickSidebar() {
                this.isActive = !this.isActive;
            }
        }
    }
</script>

所以我想要实现的目标是,作为默认值,我想将#tickets 的类设置为活动状态,并且正如您可以想象的那样,每当它被点击到另一个 a href 时,我希望它在前一个是活动的和非活动的。所以我试图做一些合乎逻辑的事情。如果你能给我任何想法,我会很高兴的。

4

0 回答 0