Javascript 在使用array.push（）之后，如何为数组中的每个元素应用自定义类？

我正在尝试使用Vue.js编写一个消息UI，很像WhatsApp界面。每条消息都是数组中的一个元素，我的计划是对每条消息应用自定义类，以便通过检查用户名将消息向左或向右对齐。通过使用.push（）将消息添加到原始数组来发送消息

我的代码如下：

        <div class="conversation" v-chat-scroll="{always: false, smooth: true}">

        <div v-for="message in conversationResources" :key="message.id" :class="{
            'my-message': conversationResources[conversationResources.length - 1].name == 'my name',
            'your-message': conversationResources[conversationResources.length - 1].name !== 'my name'
        }">

            <span class="message-info">{{ message.name }}: </span>
            <span>{{ message.content }}</span>
            <span class="timestamp">{{ message.timestamp }}</span>

        </div>
    </div>

发送消息：

sendMessage: function(inputMessage) {
            // Send message
            this.conversationResources.push({
                name: 'my name',
                content: inputMessage, 
                timestamp: moment.utc().format('LTS')
            })
            this.inputMessage = ''

---

结果是，每次我单击send（触发push（））时，以前的所有messages类都被更新为“my message”类，并对齐到错误的一侧。因此，我需要在触发push（）时保持前面消息的类不变。你知道怎么做吗？

因为这个-1: “我的消息”：conversationResources[conversationResources.length-1]

您的聊天室应该对齐左侧的所有文本，并且只为一个用户提供类。 所以把所有的都向左对齐

创建if类（例如：获取哪个用户登录到您的选项卡中，等于用户已发布消息-如果此用户为===已登录用户，则添加类以向右对齐）。 此处仅需要一个类：）

---

这肯定会起作用：）

因为-1: “我的消息”：conversationResources[conversationResources.length-1]

您的聊天室应该对齐左侧的所有文本，并且只为一个用户提供类。 所以把所有的都向左对齐

创建if类（例如：获取哪个用户登录到您的选项卡中，等于用户已发布消息-如果此用户为===已登录用户，则添加类以向右对齐）。 此处仅需要一个类：）

这肯定有用：）

试试这个

<div v-for="message in conversationResources" :key="message.id" :class="{
                                                                      'my-message': message.name == 'my name',
                                                                      'your-message': message.name !== 'my name'
                                                                      }">

<span class="message-info">{{ message.name }}: </span>
<span>{{ message.content }}</span>
<span class="timestamp">{{ message.timestamp }}</span>

{{message.name}}：
{{message.content}
{{message.timestamp}

试试这个

<div v-for="message in conversationResources" :key="message.id" :class="{
                                                                      'my-message': message.name == 'my name',
                                                                      'your-message': message.name !== 'my name'
                                                                      }">

<span class="message-info">{{ message.name }}: </span>
<span>{{ message.content }}</span>
<span class="timestamp">{{ message.timestamp }}</span>

{{message.name}}：
{{message.content}
{{message.timestamp}

像这样的事

newvue({
el:“#应用程序”，
数据（）{
返回{
输入消息：“”，
对话资源：[
{name:'my name'，content:'Hello'，时间戳：1}，
{name:'your name'，content:'Hi'，时间戳：2}，
{name:'你的名字'，content:'你好吗？'，时间戳：3}
]
}
},
方法：{
getMessageClass（消息）{
return message.name==‘我的名字’？‘我的消息’：‘你的消息’
},
发送消息（输入消息）{
//发送消息
这是.conversationResources.push({
姓名：'我的名字'，
内容：inputMessage，
时间戳：4
})
this.inputMessage=“”
}
}
})

。我的留言{
文本对齐：右对齐；
背景颜色：蓝色；
}
.你的留言{
文本对齐：左对齐；
}

{{message.name}}：
{{message.content}
{{message.timestamp}
邮寄

像这样的东西

newvue({
el:“#应用程序”，
数据（）{
返回{
输入消息：“”，
对话资源：[
{name:'my name'，content:'Hello'，时间戳：1}，
{name:'your name'，content:'Hi'，时间戳：2}，
{name:'你的名字'，content:'你好吗？'，时间戳：3}
]
}
},
方法：{
getMessageClass（消息）{
return message.name==‘我的名字’？‘我的消息’：‘你的消息’
},
发送消息（输入消息）{
//发送消息
这是.conversationResources.push({
姓名：'我的名字'，
内容：inputMessage，
时间戳：4
})
this.inputMessage=“”
}
}
})

。我的留言{
文本对齐：右对齐；
背景颜色：蓝色；
}
.你的留言{
文本对齐：左对齐；
}

{{message.name}}：
{{message.content}
{{message.timestamp}
邮寄

非常感谢大家这么快发表评论！我试过囚犯Raju和Shirtle的答案，对他们都很有效！愚蠢的我，我会确保我不会包括整个数组时，我再次申请类。大家干杯！非常感谢大家评论这么快！我试过囚犯Raju和Shirtle的答案，对他们都很有效！愚蠢的我，我会确保我不会包括整个数组时，我再次申请类。大家干杯！