VueJS динамический класс

Question

1

Читая документацию, я не понимаю, как я могу изменить класс.

Данные моих компонентов выглядят так:

props: [
  'm_c_id',
  'recipient_id',
  'sender_id',
  'userId'
],

Теперь, если sender_id == userId я хочу показать это в своем шаблоне:

<div class="msg-from-me">
   <p>Hello</p>
</div>

или если recipient_id == userId Я хочу показать это:

<div class="msg-from-them">
   <p>Hello</p>
</div>

Kiow 03 июль 2017, в 21:49

1

Это хорошо описано в документации .
Bert 03 июль 2017, в 19:25
0

@BertEvans это так? v-bind:class="{'msg-from-me': userId==m_sender_id, 'msg-from-them': userId==m_recipient_id}"
Kiow 03 июль 2017, в 19:26
2

Возможный дубликат Vue.js: условная стилизация класса
Bert 03 июль 2017, в 19:27
0

Да, вот так.
Bert 03 июль 2017, в 19:27

Показать ещё 2 комментария

Теги:

vue.js

vuejs2

1 ответ

Это хорошо описано в документации .
@BertEvans это так? v-bind:class="{'msg-from-me': userId==m_sender_id, 'msg-from-them': userId==m_recipient_id}"
Возможный дубликат Vue.js: условная стилизация класса

aprouja1 · Accepted Answer · 2017-07-03T22-21-00.000Z

Вы также можете использовать тернарный оператор для переключения классов:

<div v-bind:class="[sender_id === userId ? msg-from-me : msg-from-them]">

Таким образом, если только два параметра - sender_id или recipient_id, соответствующий класс переключится.