VueJS dynamic class

Question

Reading the documentation I don't understand how I can change a class.

My component data looks like this:

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

Now if sender_id == userId I want to show this in my template:

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

or if recipient_id == userId I want to show this:

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

@BertEvans is it like this? v-bind:class="{'msg-from-me': userId==m_sender_id, 'msg-from-them': userId==m_recipient_id}" — Kiow
– Kiow, Commented Jul 3, 2017 at 19:26

aprouja1 · Accepted Answer · 2017-07-04 00:55:27Z

3

You can also use the ternary operator to toggle classes:

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

This way, if the only two options are sender_id or recipient_id, the proper class will toggle.

answered Jul 4, 2017 at 0:55

aprouja1

1,82011 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1