根据条件

Question

我试图列出2个用户与vue 2之间的聊天列表。 以我的风格，我有两个班级＆＃39;离开＆＃39;并且＆＃39;对＆＃39;帮助显示聊天是属于第一个还是最后一个用户。

这是我的循环

 <div class="row chats-container">
    <div class="row chat-message clearfix" 
        v-for="chat in chats">
        <img src="./../../assets/userDefault.png" alt="">
        <span>{{chat.chat}}</span>
    </div>
 </div>

以下是我想要使用的条件：'v-if="auth.id === chat.sender.id"'

我想在两个班级之间切换：left和right

需要一些帮助...

Answer 1

您可以对class属性:class使用属性绑定，然后您可以使用vue-component的属性和方法。

<div class="row chats-container">
   <div 
       v-for="chat in chats"
       :class='{"row": true, "chat-message": true, "clearfix": true, "left": auth.id !== chat.sender.id, "right": auth.id === chat.sender.id}'
   >
     <img src="./../../assets/userDefault.png" alt="">
     <span>{{chat.chat}}</span>
   </div>
</div>

如果长度令你烦恼（这让我烦恼），你可以设置一个方法：

methods: {
  textMessageStyle (chat) {
    return {
      "row": true,
      "chat-message": true, 
      "clearfix": true,
      "left": auth.id !== chat.sender.id, 
      "right": auth.id === chat.sender.id
    }
  }
}

然后：

<div class="row chats-container">
   <div 
       v-for="chat in chats"
       :class="textMessageStyle(chat)" 
   >
     <img src="./../../assets/userDefault.png" alt="">
     <span>{{chat.chat}}</span>
   </div>
</div>