vue.js 如何根据条件仅更改特定导航活动背景颜色

anauzrmj  于 2023-02-05  发布在  Vue.js
关注(0)|答案(1)|浏览(121)

我只想将1个特定的nav-item更改为红色(如果选中),这意味着其他项将保持蓝色,并且只有特定的nav-itm的颜色将更改(如果选中)。
示例条件如下所示:
if(this.tabid===3 && active) { background color:red; }

<b-navbar-nav class="mx-auto row nav-slot-custom-bar">
                            <template v-for="(item, i) in menus">
                                <b-nav-item 
                                    :href="item.href" 
                                    class="col" 
                                    @click="changeTab(item.tabid)" 
                                    :class="{'active': selectNav == item.tabid}" 
                                    :key="i">

                                    <b-row class="text-center mb-1 nav-btm-icon" :class="{'active': selectNav == item.tabid}">
                                        <img
                                            :src="item.icon" 
                                            aria-hidden="true"
                                            class="mx-auto"
                                            style="width: 31px; height: 31px;"
                                            :class="{ 'active': selectNav == item.tabid }"
                                           
                                          
                                          
                                        />
                                    </b-row>
                                </b-nav-item>
                            </template>
                    </b-navbar-nav>
qzwqbdag

qzwqbdag1#

你可以像这样添加条件类,然后我会添加一个类,它包含你想要的属性:

:class="[
 this.tabid === 3 && active ? 'be_red' : ''
]"

<style>
.be_red {
  background-color:red;
}
</style>

相关问题