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

Question

我试图列出2个用户与vue 2之间的聊天列表。 以我的风格，我有2个类'左'和'右'帮助以显示聊天是属于第一位还是最后一位用户。

这里是我的循环

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