如何更改like按钮的颜色？答案

【问题标题】：How do I change the color of the like button?如何更改like按钮的颜色？
【发布时间】：2021-11-14 07:02:54
【问题描述】：

我正在制作类似 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>

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

【问题讨论】：

您的问题中似乎没有任何代码提到灰色或红色？
灰色是默认设置。红色是“危险”。 :variant="currentMode == 'grid' ? 'danger' : ''"第一个代码部分改变颜色。当我单击时，情况会发生变化，我从函数中得到一个网格。网格时，颜色变为红色。所以我认为可以通过使用条件语句从红色返回灰色。但它没有按我的意愿工作有什么好的方法吗？

标签： javascript html vue.js button colors

【解决方案1】：

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

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

data () {
 return {
    isLiked: false
 }
}

【讨论】：