How to create a conditional class binding in vue 3 and add more class when condition fullfilled-CodePudding

I am new to Vue js 3. How to create a conditional class binding in Vue 3. I want it like this. If router.path != '/' then add class 'nav-bar-two' otherwise keep blank. in laravel, it's easy to add a class with an if else condition. But in Vue js, it's different. What to do? i am using vue3, vue-router, laravel 9

<div 
class = "main-nav" 
v-bind:>

....some other HTML code.....

</div>

My Final Result should be like this if I am not in index path like "/" then the class should be and if I am in index path "/" then the class should be

CodePudding user response：

Vue3 has awesome docs

<div  :>
    ....some other HTML code.....
</div>

CodePudding user response：

I found the answer. Final answer is

<div  :>
    ....some other HTML code.....
</div>

Description: Dont know why $router.path is not working but should work. $route.name is working.