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>

Answer 1

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.