如何更改“赞”按钮的颜色？

Question

我正在制作类似 Twitter 按钮的东西。

我想改变图标按钮的颜色。

点击按钮时，灰变红成功

但是我不知道怎么把它从红色变成灰色。

我正在使用 javascript 和 vue。

<template>
  <div id="postbox">
    <div class="thumbnail-img" v-bind:style="{ backgroundImage: 'url(' + postItem.img + ')'}"></div>
    <div>
        <h4>{{postItem.title}}</h4>
        <p>{{ cutDescript }}</p>
        <div class="text-date">{{postItem.date}}</div>
        <hr>
        <div class="footer">
            <img class="profile-img" :src="postItem.profileImg"/>
            <span class="writer">by <span class="bold">{{postItem.writer}}</span></span>
            <b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
                    :variant="currentMode == 'grid' ? 'danger' : ''"
                    v-on:click="greet('grid')"
            />
            <span class="good_num">{{postItem.good}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'postbox',
  props: {
      post: {
          type: Object,
          default: function () {
              return {
                  title: 'Undefined',
                  descript: 'This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.',
                  date: '----년 --월 --일',
                  profileImg: '../assets/logo.png',
                  writer: 'unknown',
                  good: 0,
                  img: '../assets/logo.png'
              }
          }
      }
  },
  data () {
    return {
        postItem: this.post,
        currentMode: this.mode
    }
  },
  computed: {
      cutDescript: function () {
          if (this.postItem && this.postItem.descript && this.postItem.descript.length >= 200) {
              return `${this.postItem.descript.slice(0, 197)}...`
          } else if (this.postItem && !this.postItem.descript) {
              return '본문이 비어있습니다.'
          }
          return this.postItem.descript
      }
  },
  methods: {
       greet: function (mode) {
           if (mode !== 'grid' && mode !== 'map') {
                mode = 'grid'
            }
            this.currentMode = mode
            this.$emit('current-mode', this.currentMode)
       }
  }
}
</script>

如何让按钮在灰色和红色之间切换？

Answer 1

在这种情况下，您应该使用布尔数据来代替按钮状态在红色和灰色之间切换

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
   :variant="isLiked ? 'danger' : ''"
   @click="isLiked = !isLiked"
/>

data () {
 return {
    isLiked: false
 }
}

如何更改“赞”按钮的颜色？

How do I change the color of the like button?

html

javascript

colors

button

vue.js