As a newcomer to Vue.js 3, I am wondering how to implement a conditional class binding in Vue 3. Specifically, I would like to achieve the following logic: if router.path != '/', then add the class 'nav-bar-two'; otherwise, do not apply any class. While adding a class with an if-else condition is straightforward in Laravel, it seems to be a bit different in Vue.js. Can anyone suggest how to achieve this? I am currently using Vue 3, Vue Router, and Laravel 9.
<div
class = "main-nav"
v-bind:class="$router.path !== '/' ? 'nav-bar-two' : '' ">
....some other HTML code.....
</div>
The desired final result should look like this: when not on the index path ("/"), the class should be
class="main-nav nav-bar-two"index path ("/"), the class should simply be class="main-nav".