根據條件在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>