Sometimes, we want to use multiple condition in v-if in Vue.js.

In this article, we’ll look at how to use multiple condition in v-if in Vue.js.

How to use multiple condition in v-if in Vue.js?

To use multiple condition in v-if in Vue.js, we can add them all into v-if.

For instance, we write

<template>
  <div>
    <div v-if="item.fullName !== null && item.fullName !== ''"></div>
  </div>
</template>

to check if item.fullName isn’t null or an empty string with item.fullName !== null && item.fullName !== ''.

If both conditions return true, then we render the div.

Conclusion

To use multiple condition in v-if in Vue.js, we can add them all into v-if.