[Vuejs]-How to change styles depending of true/false in vuejs

this is how u do it:

<div class="anyclass" :class="dynamicClass" @click="orders">
  <div class="">
    Orders
  </div>
</div>

<script setup> // Composition API
  const dynamicClass = computed(() => {
    return {
      'green': visibleComponent != 'orders',
      'opacity-25 ': visibleComponent == 'orders',
    }
  })

  // Options API
  export default {
    computed: {
      dynamicClass() {
        return {
          'green': visibleComponent != 'orders',
          'opacity-25 ': visibleComponent == 'orders',
        }
      }
    }
  }
</script>

Do this;

<div 
    :class="`${visibleComponent !== 'orders' ? 'green' : 'opacity-25'}`"
    @click="orders"
>

I assume you talking about Conditional Rendering
this offical sample code should be clear about how to use v-if

<script>
export default {
  data() {
    return {
        awesome: true
    }
    }
}
</script>

<template>
  <button @click="awesome = !awesome">toggle</button>

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
</template>

Assuming you have already defined visibleComponent in your data object or as a ref() with Vue3, you could use a ternary operator inline with a dynamic class binding. This is most similar to what you are showing in your code already.

If you are unfamiliar with ternary operators, it is basically an if/else statement using shorthand. condition ? ifConditionTrue : ifConditionFalse This format works very nicely with Vue dynamic class bindings.

<div
 :class="
  visibleComponent
   ? visibleComponent != 'orders' && 'green'
   : visibleComponent == 'orders' && 'opacity-25'
 ">
</div>

This first checks if the visibleComponent property has been assigned a value. Then if that value is not ‘orders’, the green class will bind to the div. Else if the value is ‘orders’, the opacity-25 class will bind.

Following your own case, this will work.
opacity-25 its inside quotation marks because of the dash "-".

<div
  :class="{ 
     green: visibleComponent != 'orders',
     'opacity-25': visibleComponent == 'orders'
  }"
  @click="orders"
  >
    <div>
      Orders
    </div>
 </div>