Javascript 如何根据Firebase返回的数据更改元素的CSS？

我正在使用vanilla JS、Vue JS和Firebase开发一个投票应用程序。我几乎完成了，但我找不到一种方法，在用户投票时使投票按钮具有不同的颜色（就像YouTube的“喜欢”和“不喜欢”按钮），因此，如果用户离开并再次回来，他们向上/向下投票的东西将保持彩色

这是我到目前为止的代码

index.js（云函数）：

const functions=require（'firebase-functions'）；
const admin=require（'firebase-admin'）；
admin.initializeApp（）；
exports.newUserSignup=functions.auth.user（）.onCreate（（用户）=>{
返回admin.firestore（）.collection（'users'）.doc（user.uid）.set({
upVotedOn:[]，
唐沃顿：[]
})
});
exports.addRequest=functions.https.onCall（（数据、上下文）=>{
返回admin.firestore（）.collection（'requests'）。添加({
text:data.text，
宋：data.songN，
得票数：0，
反对票：0，
});
});
exports.upvote=functions.https.onCall（异步（数据、上下文）=>{
const user=admin.firestore（）.collection（'users'）.doc（context.auth.uid）；
const request=admin.firestore（）.collection（'requests'）.doc（data.id）；
const doc=wait user.get（）；
if（doc.data（）.upVotedOn.includes（data.id））{
抛出新函数。https.HttpsError(
“失败的前提条件”，“您只能向上投票一首歌曲”
);
}
等待用户更新({
upVotedOn:[…doc.data（）.upVotedOn，data.id]
});
返回请求。更新({
更新投票：admin.firestore.FieldValue.increment（1），
上色：对
});
});
exports.downvote=functions.https.onCall（异步（数据、上下文）=>{
const user=admin.firestore（）.collection（'users'）.doc（context.auth.uid）；
const request=admin.firestore（）.collection（'requests'）.doc（data.id）；
const doc=wait user.get（）；
if（doc.data（）.downVotedOn.includes（data.id））{
抛出新函数。https.HttpsError(
“失败的前提条件”，“你只能对一首歌投一次否决票”
);
}
等待用户更新({
downVotedOn:[…doc.data（）.upVotedOn，data.id]
});
返回请求。更新({
向下投票：admin.firestore.FieldValue.increment（1），
低调的：真的
});
});与您的通知的结尾部分非常相似，您可以执行以下操作：

var vote_state=（直接从firebase获取，或使用API样式的无服务器请求获取）

让item=document.querySelector（'item'）

const setVotedState=（）=>{
item.classList.add（
vote-${vote\u state}
）

然后设置“向上投票”或“向下投票”的CSS样式，例如，使其具有不同的颜色。
使用Vue，您可以根据您在Vue实例的数据对象中提供的数据，有条件地在元素上添加样式或类：





或





它的工作方式与键/值对相同，键是类或css规则，值是控制其存在的表达式

isActive、activeColor和fontSize或您希望称之为数据对象属性的任何内容

我建议阅读本文以了解更多知识：
Vue基于VNode机制。因此，使用而不是直接操作Dom将是正确的方法。否则，在开发应用程序的过程中，您必须克服各种副作用。