How can I use multiple condition in v-if in VueJS?

In Vue.js, using the v-if directive to conditionally render elements based on one or more conditions is a common practice. When you need to evaluate multiple conditions, you can directly use logical operators (such as && (and), || (or), ! (not)) within v-if to combine them.

Example Demonstration

Suppose we have a component that determines whether to display a specific management panel based on the user's role and account status. The conditions are that the user must be an administrator (isAdmin) and the account must be active (isActive).

html
<template>
  <div>
    <div v-if="isAdmin && isActive">
      <p>Management panel content</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: true,
      isActive: false
    }
  }
}
</script>

In this example, the && operator is used within the v-if directive to display the management panel only when both conditions (isAdmin and isActive) are true.

Usage Methods

1. Logical AND (&&): When you require all conditions to be met, use &&. For example, the user must be an administrator and the account must be active.
2. Logical OR (||): When you require at least one condition to be met, use ||. For example, display a message if the user is an administrator or a VIP member.
3. Logical NOT (!): When you require a condition to be unsatisfied, use !. For example, display promotional information if the user is not a subscriber.

Complex Conditions

For more complex logic, consider handling the logic within methods or computed properties and then referencing those methods or computed properties in v-if.

html
<template>
  <div>
    <div v-if="shouldShowPanel">
      <p>Management panel content</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: true,
      isActive: false,
      isVIP: true
    }
  },
  computed: {
    shouldShowPanel() {
      return (this.isAdmin && this.isActive) || this.isVIP;
    }
  }
}
</script>

The benefit is that it keeps the template cleaner and places complex logic in the JavaScript code part for easier management and testing.

By using these methods, you can flexibly handle complex conditional logic with v-if in Vue.js.