Блог

Я пытаюсь предоставить несколько if / else для встроенного стиля для нескольких значений, на которые я хочу настроить таргетинг. Я не знаю ни одного способа сделать это и поискал его в Google, но ничего не нашел. Надеюсь, кто-нибудь здесь может посоветовать. Спасибо.

 <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"
        >
  

Вы также можете определить стили как класс в разделе стиль, а затем переключаться между классами с помощью встроенных строк. Таким образом, вы достигаете упрощения написания и редактирования, ясности и возможности повторного использования.

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

Стили:

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

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

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