我有 2 个数组 - users 和 onlineUsers，如果两个数组中都存在该用户，我将如何使用 Vue.js 循环并显示所有用户并应用类？

Question

我有一个名为users的对象数组，每个对象都有一个名为username的属性

let users = [
    {
        username: 'Test1'
    },
    {
        username: 'Test12'
    }
]

我还有一个名为onlineUsers的数组，它还包含具有名为username的属性的对象：

let onlineUsers = [
    {
        username: 'Test1'
    }
]

现在我正在遍历用户并像这样显示用户：

    <p v-for='member in users'>
        <span class='username'>{{ member.username }}</span>
    </p>

现在我试图弄清楚如何将一个特殊的类应用于users和onlineUsers数组中也存在的用户。 问题是我不知道怎么做。 我尝试了双v-for但这似乎不起作用。

Answer 1

您可以使用:class和.some()数组辅助函数，例如：

• :class用于条件绑定
• .some()如果至少有一个条件为真，则返回真

视频：

<p v-for='member in users'>
        <span class='username' :class="{special : onlineUsers.some(v=>v.username === member.username) }">{{ member.username }}</span>
</p>

CSS：

.special: {
...
}

参考 ：

• https://v2.vuejs.org/v2/guide/class-and-style.html
• array_some_mdn_reference