Условно применить css класс на основе пары ключ-значение в массиве, VueJS

Question

У меня есть массив, как показано на рисунке ниже. Как добавить условный CSS класс к

на основе ключа sender_id массива в VueJS?

условия: 1) если sender_id != sender_id: добавить прибывший класс 2) если sender_id == sender_id: добавить доставленный класс.

Цель состоит в том, чтобы добавить CSS стилизацию согласно поступившему или доставленному сообщению в приложении чата.

Answer 1

Использовать троичную операцию:

<span :class="todo.sender_id === sender_id ? 'delivered' : 'arrived'">{{message}}</span>

Проверить образец скрипта здесь

Answer 2

<div v-bind:class="{ 'myClass1': sender_id === sender_id, 'myClass2': sender_id !== sender_id }" class="otherClass"></div>

https://vuejs.org/v2/guide/class-and-style.html