how to change styles depending of true/false in vuejs - vue.js

Question

I'm trying to change the style if one of the classes returns true.
My template-
<div
class=""
:class="{
' green': visibleComponent != 'orders',
' opacity-25 ': visibleComponent == 'orders',
}"
#click="orders"
>
<div class="">
Orders
</div>
</div>
Any help on how do I go about this?

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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.