如何使用 Firestore 数据更改 v-for 元素的颜色

Posted 2023-02-22

【中文标题】如何使用 Firestore 数据更改 v-for 元素的颜色

【英文标题】：How to change color for v-for elements with Firestore data

【发布时间】：2021-03-30 00:48:30

【问题描述】：

我的项目就像 Twitter。

我能做什么：

显示帖子 实时显示喜欢（数字）

我不能做什么：

在每个点赞图标中显示颜色变化

代码如下：

我的 Firestore 数据库：

posts 
  content: string,
  likes: 0,

Vue：

<li v-for="post in posts" :key="post.id">
  <p> post.content </p>
  <div>
    <v-icon @click="posts(post.id)">mdi-heart</v-icon>
    <span>  post.likes  </span>
  </div>
</li>

javascript：

method: 
  like () 
    if (I didn't like) 
      // change the color of like icon of the post.
     else 
      // change the color back.
    )
  

那么...如何更改每个帖子的点赞图标的颜色？

（正在开发最新版本的 Vue.js、Vuetify、Nuxt.js、Firebase。）

【问题讨论】：

听起来你可能需要学习 CSS 来设置 html 元素的样式。

您好，Doug，感谢您的评论。我认为 CSS 不能更改列表中的“每个”元素。 CSS 会改变每个元素。

您可以根据需要单独设置每个元素的样式。

我对此一无所知...你能告诉我更多吗？

提示：使用v-bind.style 或v-bind:class。这些用例包含在文档中：vuejs.org/v2/guide/class-and-style.html

【参考方案1】：

<template>
  ...
  ...
  <div :class="bindLike">
    <v-icon @click="posts(post.id)">mdi-heart</v-icon>
    <span>  post.likes  </span>
  </div>
</template>

<script>
export default 
  computed: 
    bindLike: function() 
      return post.likes > 0 ? 'liked' : 'notliked';
    
  ,

</script>

<style>
.liked  background: blue; 
.notliked  background: transparent; 
</style>

这可能对你有用..！ 但是，理想的情况是创建一个新组件 PostLikes 并将 mode, count 作为道具传递。