根据条件在 v-for 的每个元素上切换 2 类

Question

我正在尝试使用 vue 2 列出 2 个用户之间的聊天列表。按照我的风格，我有 2 类 'left' 和 'right' 帮助显示聊天是属于第一个还是最后一个用户。

这是我的循环

 <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>

根据条件在 v-for 的每个元素上切换 2 类

Toggle 2 classes on each element of v-for based on conditions

javascript

api

laravel-5

laravel-5.3

vuejs2