Multiple conditional for inline style in Vue

Question

I'm trying to provide multiple if/else for inline style for a few value that i want to target. I don't know of any way to do this and have googled it out but found nothing. Hope anyone here can advise. Thanks.

<v-card
          style="width: fit-content"
          v-for="(message,index) in messages"
          :key="index"
          :style="{'margin-left': message.isRobot ? '' : 'auto'}"
          :style="{'border-top-left-radius': message.isRobot ? '0' : ''}"
          :color="message.isRobot? '#F5F3FF' :'#C66BCC'" 
          id="convo-space"
        >

Answer 1

<div :style="message.isRobot ? 
 'margin-left: none; border-top-left-radius: 0' : 
 'margin-left: auto; border-top-left-radius: none'">
</div>

Answer 2

You can also define the styles as a class in the style section and then switch between the classes using the inlines. This way you achieve simplified writing and editing, clarity and reusability.

<v-card 
   v-for="(message, index) in messages" 
   ... 
   :class="message.isRobot? robot : noRobot">
</v-card>

Styles:

.robot {
   margin-left: none,
   border-top-left-radius: 0,
   ...
}

.noRobot {
   margin-left: auto,
   border-top-left-radius: none
   ...
}